Question

我用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>

此代码无效。 Chrome控制台说＆＃34; Uncaught TypeError：无法读取属性＆＃39; setApiKey＆＃39;未定义＆＃34;。但是这段代码正在起作用：

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>

Answer 1

看起来，你还没有加载javascript库。这就是它无法找到参考的原因。你可以添加它：

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

Answer 2

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

我的代码：

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

Answer 3

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

e.g：

onload

虽然会加载<script src="/lib/js/client.js?onload=handleClientLoad"></script>，但在加载完成后，它永远不会启动client.js功能。我认为指出这一点会很有用，因为这是一个非常令人沮丧的调试方法。

希望这有帮助。

Answer 4

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

必须在结束时调用，或者至少在定义方法“handleClientLoad”之后调用。这是它的回调，只有在它被调用之后 - 这意味着google api已准备就绪。这就是你得到gapi.client为空的原因。

为了好玩，你可以在使用gapi.client之前使用几秒钟的超时时间，看它不再是null。

Youtube Data Api - 未捕获TypeError：无法读取未定义的属性'setApiKey'

4 个答案: