javascript Youtube Data Api - 未捕获的类型错误：无法读取未定义的属性“setApiKey”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27492954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Youtube Data Api - Uncaught TypeError: Cannot read property 'setApiKey' of undefined
提问by balkondemiri
I search music with youtube data api. I use javascript and jquery and i have a problem.
Here is my code
我用 youtube 数据 api 搜索音乐。我使用 javascript 和 jquery，但遇到了问题。
这是我的代码
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="<?php echo SITE_PUBLIC; ?>/bootstrap-3.2.0/dist/js/bootstrap.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
<script>
function keyWordsearch(){
gapi.client.setApiKey('myapikey');
gapi.client.load('youtube', 'v3', function() {
data = jQuery.parseJSON( '{ "data": [{"name":"eminem"},{"name":"shakira"}] }' );
$.each(data["data"], function( index, value ) {
makeRequest(value["name"]);
});
});
}
function makeRequest(q) {
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 10
});
request.execute(function(response) {
$('#results').empty()
var srchItems = response.result.items;
$.each(srchItems, function(index, item) {
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');
})
})
}
keyWordsearch();
</script>
This code not working. Chrome console say "Uncaught TypeError: Cannot read property 'setApiKey' of undefined". But this code is working:
keyWordsearch() to
此代码不起作用。Chrome 控制台显示“未捕获的类型错误：无法读取未定义的属性‘setApiKey’”。但是这段代码是有效的：
keyWordsearch() 到
$(document).click(function(){
keyWordsearch()
})
I do not understand this issue. Thanks in advance
我不明白这个问题。提前致谢
EDIT
My code run on jsFiddle.But not run my html file. My html file is here:
编辑
我的代码在jsFiddle 上运行。但不运行我的 html 文件。我的 html 文件在这里：
<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<div id="container">
<h1>Search Results</h1>
<ul id="results"></ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
<script>
$(function(){
function keyWordsearch(){
gapi.client.setApiKey('AIzaSyCWzGO9Vo1eYOW4R4ooPdoFLmNk6zkc0Jw');
gapi.client.load('youtube', 'v3', function() {
data = jQuery.parseJSON( '{ "data": [{"name":"eminem"}] }' );
$.each(data["data"], function( index, value ) {
makeRequest(value["name"]);
});
});
}
function makeRequest(q) {
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 10
});
request.execute(function(response) {
$('#results').empty()
var srchItems = response.result.items;
$.each(srchItems, function(index, item) {
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');
})
})
}
keyWordsearch();
})
</script>
</body>
</html>
回答by Ibrahim Ulukaya
Looks like, you haven't load the javascript library. That's why it can't find the reference. You can add it like:
看起来，您还没有加载 javascript 库。这就是它找不到参考的原因。你可以像这样添加它：
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
回答by Peter
You can specify an initial function while calling the API like this: client.js?onload=init(see my example below). Besides no need of a doucument.ready() wrapper. I'm not sure why it works with your API key on my local machine but I guess it's some kind of magic that checks if the site is availible to the public - if true the referrer entries in your google account will get important - correct me on that if somebody knows whats exactly happening here.
您可以在调用 API 时指定一个初始函数，如下所示：（client.js?onload=init参见我下面的示例）。此外不需要 doucument.ready() 包装器。我不确定为什么它可以在我的本地机器上与您的 API 密钥一起使用，但我想这是一种检查网站是否对公众可用的魔法 - 如果为真，您的谷歌帐户中的引荐来源条目将变得重要 - 纠正我如果有人知道这里到底发生了什么。
My code:
我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<!--<link rel="stylesheet" type="text/css" media="screen" href="main.css" />-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
function makeRequest(q) {
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 3
});
request.execute(function(response) {
$('#results').empty();
var resultItems = response.result.items;
$.each(resultItems, function(index, item) {
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');
});
});
}
function init() {
gapi.client.setApiKey('AIzaSyCWzGO9Vo1eYOW4R4ooPdoFLmNk6zkc0Jw');
gapi.client.load('youtube', 'v3', function() {
data = jQuery.parseJSON( '{ "data": [{"name":"orsons"}] }' );
$.each(data["data"], function(index, value) {
makeRequest(value["name"]);
});
});
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=init"></script>
</head>
<body>
<h1>YouTube API 3.0 Test</h1>
<ul id="results"></ul>
</body>
</html>
回答by jj_
In addition to all the answers which explain that you must specify and provide a callback function for the Google API client <script>loading line, I'd like to point out that it seems that the onloadparameter will never run the specified function (at least in Chrome) when you load the Google API client.js from a local file (even though you are serving the HTML page via a webserver and not loading it from the file-system, which apparently seemed to be the only gotcha with the Google API JS client...).
除了解释您必须为 Google API 客户端<script>加载行指定和提供回调函数的所有答案之外，我想指出该onload参数似乎永远不会运行指定的函数（至少在 Chrome 中）当您从本地文件加载 Google API client.js 时（即使您通过网络服务器提供 HTML 页面而不是从文件系统加载它，这显然是 Google API JS 客户端的唯一问题。 ...）。
e.g.:
例如：
<script src="/lib/js/client.js?onload=handleClientLoad"></script>
Although client.jswill be loaded, this will never launch the handleClientLoadfunction when it's finished loading. I thought it would be useful to point this out, as this was a really frustrating thing to debug.
虽然client.js将被加载，handleClientLoad但在完成加载后永远不会启动该功能。我认为指出这一点会很有用，因为这是调试起来非常令人沮丧的事情。
Hope this helps.
希望这可以帮助。
回答by kishu
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
This MUST be called at the end, or at least after you define your method "handleClientLoad". This is its callback, and only after it was called - it means google api is ready. This is why you get gapi.client is null.
这必须在最后调用，或者至少在您定义方法“handleClientLoad”之后调用。这是它的回调，只有在它被调用之后 - 这意味着 google api 准备好了。这就是你得到 gapi.client 为空的原因。
For the fun of it, you can use a timeout of a few seconds before using gapi.client and see it is not null anymore.
为了它的乐趣，您可以在使用 gapi.client 之前使用几秒钟的超时，并查看它不再为空。
