使用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小部件：<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();
});

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