Javascript 我在Google Plus和Youtube数据API之间存在冲突问题？

所以我有一个网站，我正在工作，其中包括搜索视频使用谷歌的YouTube数据API v3（我使用的是javascript库）。在同一页面上包含新代码之前，一切都可以正常工作，导入Google+的代码以使用其共享功能。现在每当我加载页面时，YouTube视频搜索和通过Google Plus共享似乎都不起作用。以下是YouTube数据API客户端加载和搜索的代码：

function initializeGapi() {
    gapi.client.setApiKey(API_KEY); // client API_KEY variable for client
    gapi.client.load('youtube', 'v3', 
        function() { 
            console.log('Youtube API loaded.');
            searchYoutube(''); // searches youtube
        }
    );
}

此HTML标记包含在页面的标题中：

<script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>

所以一切都很顺利。现在的问题是，当我为Google Plus的共享按钮功能介绍以下代码时：

<div id="googlepluscta"> // share button
    <button
        class="g-interactivepost"
        data-contenturl="https://plus.google.com/pages/"
        data-contentdeeplinkid="/pages"
        data-clientid="142489821045.apps.googleusercontent.com"
        data-cookiepolicy="single_host_origin"
        data-prefilltext="Engage your users today, create a Google+ page for your business."
        data-calltoactionlabel="CREATE"
        data-calltoactionurl="http://plus.google.com/pages/create"
        data-calltoactiondeeplinkid="/pages/create">
      Tell your friends
    </button>
</div>

//共享按钮
告诉你的朋友

此外，在标记之前，还包括以下内容以加载Google Plus客户端：

<script type="text/javascript">
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/client:plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

（功能（）{
var po=document.createElement（'script'）；po.type='text/javascript'；po.async=true；
po.src=https://apis.google.com/js/client:plusone.js';
var s=document.getElementsByTagName（'script'）[0]；s.parentNode.insertBefore（po，s）；
})();

我还提供了屏幕截图链接，以防对您有所帮助：

---

删除您正在执行的第一个include，这一行可能会破坏内容：

<script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>

它正在崩溃，因为您在页面下方添加的异步include做了相同的事情，只是它同时加载Google+按钮代码，而不会阻止浏览器加载其他资源（这是一件好事，yay async）

既然您只加载了一次脚本，那么还应该更新异步加载，以便在加载初始脚本后添加YouTube API客户端。以下示例应足以说明您共享的代码：

<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/client:plusone.js?onload=initializeGapi';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

（功能（）{
var po=document.createElement（'script'）；po.type='text/javascript'；po.async=true；
po.src=https://apis.google.com/js/client:plusone.js?onload=initializeGapi';
var s=document.getElementsByTagName（'script'）[0]；s.parentNode.insertBefore（po，s）；
})();

现在您只设置了一个gapi.*值的实例，您的代码运行起来应该会更顺利

接下来，如果您在使用交互式帖子后从YouTube API中获得错误，那么很可能是因为交互式帖子按钮可以更新gapi的凭据。将作用域添加到按钮，youtube API权限将添加到更新的API凭据：

<button
    class="g-interactivepost"
    data-contenturl="https://plus.google.com/pages/"
    data-contentdeeplinkid="/pages"
    data-clientid="142489821045.apps.googleusercontent.com"
    data-scope="https://www.googleapis.com/auth/youtube.readonly"
    data-cookiepolicy="single_host_origin"
    data-prefilltext="Engage your users today, create a Google+ page for your business."
    data-calltoactionlabel="CREATE"
    data-calltoactionurl="http://plus.google.com/pages/create"
    data-calltoactiondeeplinkid="/pages/create">
  Tell your friends
</button>

告诉你的朋友

---

希望能有所帮助。

非常感谢您的帮助！直到现在我才意识到您已经发表了评论：）删除页面顶部的额外脚本插入大大加快了速度。在我留下的导入脚本中，我还添加了“initializeGapi”函数作为对上面提到的URL的回调。然而，我仍然有同样的问题，来自YouTube的页面和视频加载良好（当然使用YouTube数据API）。但只要我登录到Google Plus，然后尝试使用YouTube数据API再次搜索，我仍然会收到错误。我收到了403“权限不足”的回复：嘿，这解决了问题，现在它工作得很好！我完全忽略了数据范围字段，甚至没有注意到。再次非常感谢您对本课程的帮助！