使用 InstantClick.js 加载初始页面后 jquery.mb.YTPlayer.js 无法正常工作答案

【问题标题】：jquery.mb.YTPlayer.js not working after initial page load with InstantClick.js使用 InstantClick.js 加载初始页面后 jquery.mb.YTPlayer.js 无法正常工作
【发布时间】：2015-05-23 17:53:38
【问题描述】：

在使用InstantClick.js 进行初始页面加载后，有什么方法可以使jquery.mb.YTPlayer.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 个对象，然后我得到 1 个导航的 2 个对象，然后我得到 3 个对象，依此类推。下图是 4 个页面导航后，10 个 window.YT 对象。

【问题讨论】：

标签： javascript jquery pjax ytplayer

【解决方案1】：

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

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

Youtube 小部件：<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 库：<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js" data-no-instant></script>

YT 播放器插件：<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js" data-no-instant></script>

InstantClick 插件：<script src="instantclick.min.js" data-no-instant></script>

将以下代码也放入：<script data-no-instant></script>

同时在 mouseup 和 touchend 事件中销毁您的 YT Player 实例。

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

然后在 InstantClick 事件 change 上重新初始化 YT 播放器。

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

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

【讨论】：