Question

我是一个完整的新手，但我正在制作连接到YouTube API并执行搜索的教程，其中包括制作search.js文件和search.html文件。然后html调用具有这些函数的search.js文件。在Codecademy中一切正常，我可以看到我的youtube查询的正常结果。但是我想要玩更多，所以我将两个文件剪切并粘贴到.js和.html文件中，将它们放在同一个目录中并尝试在本地运行，但之后我只得到一个空白的html页面。

代码是：

Search.js

function showResponse(response) {
    var responseString = JSON.stringify(response, '', 2);
    document.getElementById('response').innerHTML += responseString;
}

function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

function onYouTubeApiLoad() {
    gapi.client.setApiKey('AIzaSyCR5In4DZaTP6IEZQ0r1JceuvluJRzQNLE');

    search();
}

function search() {
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: 'Ben Woods',
    });

    request.execute(onSearchResponse);
}

function onSearchResponse(response) {
    showResponse(response);
}

Search.html

<!DOCTYPE html>
<html>
    <head>
        <script src="search.js" type="text/javascript"></script>
        <script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
    </head>
    <body>
        <pre id="response"></pre>
    </body>
 </html>

当我打开html文档时，我只得到一个空白页面，如果我Alt + Command + J，我看到以下错误：拒绝加载chrome-extension：//gkojfkhlekighikafcpjkiklfbnlmeio/js/jquery.min.map。资源必须列在web_accessible_resources清单键中，以便由扩展名外的页面加载。 core：rpc：shindig.random：shindig.sha1.js？c = 2：838无法执行＆＃39; postMessage＆＃39;在＆＃39; DOMWindow＆＃39;：提供的目标来源（＆＃39; file：//＆＃39;）与收件人窗口的来源（＆＃39; null＆＃39;）不匹配。 cb = gapi.loaded_0：47无法执行＆＃39; postMessage＆＃39;在＆＃39; DOMWindow＆＃39;：提供的目标来源（＆＃39; file：//＆＃39;）与收件人窗口的来源（＆＃39; null＆＃39;）不匹配。

Answer 1

IF 您有Hola Better Internet，这可能是您的问题。我有一段时间遇到同样的问题，我删除了与我的网站jquery/javascript略有关联的所有内容，但它没有解决问题。我从Chrome中删除了Hola，它解决了这个问题。

Answer 2

我认为您的问题是您在本地运行文件（通过file：//），但API希望您通过http：//或https：//调用它。而不是在本地工作，尝试使用像http://jsfiddle.net/

这样的在线js游乐场

Codecademy代码在其网站上连接到Youtube API，但不会在本地运行

2 个答案: