Youtube Data Api - 未捕获的类型错误:无法读取未定义的属性“setApiKey"

2023-09-06前端开发问题

本文介绍了Youtube Data Api - 未捕获的类型错误:无法读取未定义的属性“setApiKey"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我使用 youtube data api 搜索音乐.我使用 javascript 和 jquery，但我遇到了问题.
这是我的代码

I search music with youtube data api. I use javascript and jquery and i have a problem.
Here is my code

<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() 到

This code not working. Chrome console say "Uncaught TypeError: Cannot read property 'setApiKey' of undefined". But this code is working:

keyWordsearch() to

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

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

I do not understand this issue. Thanks in advance

编辑
我的代码在 jsFiddle 上运行.但不运行我的 html 文件.我的 html 文件在这里:

EDIT
My code run on jsFiddle.But not run my html file. My html file is here:

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

推荐答案

除了所有解释您必须为 Google API 客户端指定和提供回调函数的答案<script>加载行，我想指出，当您从本地文件(即使您通过网络服务器提供 HTML 页面，而不是从文件系统加载它，这显然是 Google API JS 客户端的唯一问题...).

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 onload parameter 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...).

例如:

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

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

Although client.js will be loaded, this will never launch the handleClientLoad function when it's finished loading. I thought it would be useful to point this out, as this was a really frustrating thing to debug.

希望这会有所帮助.

这篇关于Youtube Data Api - 未捕获的类型错误:无法读取未定义的属性“setApiKey"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

js删除数组中指定元素的5种方法

JavaScript小数运算出现多位的解决办法

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript

CoffeeScript 总是以匿名函数返回

热门文章

热门精品源码

最新VIP资源