Question

我已经编写了一个小型移动网络应用程序，可以通过手机控制我的电脑上的YouTube，但是在使用YouTube API进行搜索时会发生一些奇怪的事情。第一次加载页面时，一切都运行良好 - 输入搜索词，单击搜索并返回结果。

但是，如果我点击另一个页面然后返回，则搜索不再有效，我在下面的搜索功能中看到“未捕获的TypeError：无法读取'搜索'未定义的属性”。

我对JavaScript非常陌生，所以请随意指责代码，但我已经看到这个问题已经有一段时间了，尽管有很多谷歌搜索无法找到解决方案。

// Called automatically when JavaScript client library is loaded.

function onClientLoad()
{

// 
try
{
gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

// Called automatically when YouTube API interface is loaded.
function onYouTubeApiLoad()
{
gapi.client.setApiKey('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
}

function search(q) {
// Create api request and execute it

var request = gapi.client.youtube.search.list({
type: 'video',
        part: 'snippet',
        q: q
});
        // Send the request to the API server,
        // and invoke onSearchRepsonse() with the response.
        request.execute(onSearchResponse);
}

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

API脚本的链接位于我的search.aspx页面中，如下所示：

<script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>

JQuery也在使用，所以我不知道是否有任何有趣的业务在那里造成，但是在这一点上的任何想法都会非常感激！

Answer 1

确保在search()执行后调用onYouTubeApiLoad()。如果您将search()绑定到click事件，请确保在回调中执行此操作：

function onYouTubeApiLoad()
{
  gapi.client.setApiKey('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
  $("button#search").on("click", function(){ search(...); })
}

Answer 2

看起来我想通了。看起来API的初始加载是在首次加载

中的脚本时完成的

<script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>

但离开并返回页面时再没有加载。我添加了onClientLoad（）;到了

$（document）.ready函数现在似乎正在运行。

Youtube API仅在首页访问时加载

2 个答案: