Question

我已经看到了很多类似的问题，但我相信这是不同的。当我尝试在全局范围内定义onYouTubeIframeAPIReady时，该函数只被调用大约一半的时间我加载页面（如果我保持刷新，有时我会看到控制台消息，有时它不是＆＃ 39;那里）。让我感到困惑的是，这种情况有时只会发生，而且我不会在我的代码中的任何其他位置调用onYouTubeIframeAPIReady。

我检查过的问题区域：

我在Github页面上运行它（所以它不是本地的）
该功能在全局范围内定义

我的代码如下：

window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { // TODO: Sometimes this doesn't work
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
}

Answer 1

这听起来很像您通过DOM标记中的src属性加载API库，而不是在页面加载后将其动态添加到DOM的建议方式，或者您是在创建播放器对象所针对的DOM元素之前重新加载库...因为只要库加载自己就调用onYouTubeIframeAPIReady函数，如果您尝试通过src属性加载库，则总是存在这种情况在您的功能实际注册之前或之前（在这种情况下）玩家之前加载并调用该功能的标签上的标签＆＃39;元素存在于DOM中。工作代码看起来像这样（放在页面底部附近......肯定低于您尝试创建iframe代替的元素）：

<div id="player"></div>
<script>
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 var player;
 window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { 
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
 };
</script>

如果我错了，并且您是如何加载图书馆的，那么您想要在Chrome开发工具或firebug中进行监控以查看何时关于DOM元素何时存在，库正在加载。

Answer 2

你最后忘记了分号：

window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { // TODO: Sometimes this doesn't work
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
};

YouTube IFrame API并不总是加载？

2 个答案: