Youtube Data Api - 未捕获的类型错误：无法读取未定义的属性“setApiKey”答案

【问题标题】：Youtube Data Api - Uncaught TypeError: Cannot read property 'setApiKey' of undefinedYoutube Data Api - 未捕获的类型错误：无法读取未定义的属性“setApiKey”
【发布时间】：2014-12-15 20:54:43
【问题描述】：

我使用 youtube data 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>

此代码不起作用。 Chrome 控制台说“未捕获的类型错误：无法读取未定义的属性 'setApiKey'”。但是这段代码有效：

keyWordsearch() 到

$(document).click(function(){
        keyWordsearch()
})

我不明白这个问题。提前致谢

编辑
我的代码在 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>

【问题讨论】：

gapi.client 未定义（空）。去让它不为空。

标签： javascript youtube-api youtube-javascript-api

【解决方案1】：

看起来，您还没有加载 javascript 库。这就是为什么它找不到参考。您可以像这样添加它：

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

【讨论】：

【解决方案2】：

您可以在调用 API 时指定一个初始函数，如下所示：client.js?onload=init（请参阅下面的示例）。除了不需要 doucument.ready() 包装器。我不确定为什么它可以在我的本地计算机上使用您的 API 密钥，但我想这是一种检查该网站是否对公众可用的魔法 - 如果为真，您的谷歌帐户中的推荐人条目将变得很重要 - 纠正我如果有人知道这里到底发生了什么。

我的代码：

<!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>

【讨论】：

【解决方案3】：

除了所有解释您必须为Google API客户端<script>加载行指定并提供回调函数的答案之外，我想指出onload参数似乎永远不会运行当您从本地文件加载 Google API client.js 时指定的函数（至少在 Chrome 中）（即使您通过网络服务器提供 HTML 页面而不是从文件系统加载它，这显然似乎是只能使用 Google API JS 客户端...）。

例如：

<script src="/lib/js/client.js?onload=handleClientLoad"></script>

虽然client.js 会被加载，但它永远不会在加载完成后启动handleClientLoad 函数。我认为指出这一点会很有用，因为调试起来非常令人沮丧。

希望这会有所帮助。

【讨论】：

【解决方案4】：

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

这必须在最后调用，或者至少在你定义你的方法“handleClientLoad”之后调用。这是它的回调，只有在它被调用之后——这意味着谷歌 api 已经准备好了。这就是你得到 gapi.client is null 的原因。

为了好玩，您可以在使用 gapi.client 之前使用几秒钟的超时，然后查看它不再为空。

【讨论】：