javascript - 使用 InstantClick.js 加载初始页面后，jquery.mb.YTPlayer.js 无法工作

Question

有什么办法可以制作jquery.mb.YTPlayer.js初始页面加载后工作 InstantClick.js ？

该插件在初始页面加载时工作正常，但之后就不再工作了。

这是我最初初始化它的方式，在页面加载时工作正常，但在进一步导航后就不行了:

app.js

InstantClick.on('change', function() {
        $(".player").mb_YTPlayer();
});

然后我花了几个小时尝试调试，最终得到了这样的结果:

app.js

InstantClick.on('change', function() {
    if ($(".mbYTP_wrapper")[0]){
        $(".player").playerDestroy();
        console.log('destroyed');
    }
    if (window.YT) {
        console.log(window.YT);
    }

    $(".player").mb_YTPlayer();
});

在jquery.mb.YTPlayer.js中，我尝试将其添加到.playerDestroy中:

playerDestroy: function () {
        jQuery("#YTAPI").remove();
}

在初始页面加载对象window.YT当然不存在，但是在第一页导航之后我得到1个对象，然后我得到2个对象用于1次导航，然后我获取 3 个对象，依此类推。下图是 4 次页面导航后，10 个 window.YT 对象。

Answer 1

我检查了您使用的两个插件，并得出结论，问题在于您的代码在每次导航时都会重新加载。

要解决该问题，请尝试使用 data-no-instant您只需加载一次的脚本的属性。这可能包括以下内容:

Youtube widget: <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflr-TgN1/www-widgetapi.js" async="" data-no-instant></script>

Youtube API: <script src="https://www.youtube.com/player_api?v=2.7.6" id="YTAPI" data-no-instant></script>

JQuery library: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js" data-no-instant></script>

YT Player plugin: <script type="text/javascript" src="inc/jquery.mb.YTPlayer.js" data-no-instant></script>

InstantClick plugin: <script src="instantclick.min.js" data-no-instant></script>

Put Following Codes Too inside: <script data-no-instant></script>

还在 mouseup 和 touchend 事件上销毁您的 YT Player 实例。

$(body).on('mouseup touchend',".player",function(){
    $(".player").playerDestroy();
});

并在 InstantClick 事件上重新初始化 YouTube 播放器 change .

InstantClick.on('change',function(){
    $(".player").mb_YTPlayer();
});

如果你这样做，我认为问题应该得到解决。