JavaScript 视频库相互覆盖功能答案

【问题标题】：JavaScript video libraries overwriting each other functionsJavaScript 视频库相互覆盖功能
【发布时间】：2018-07-16 21:05:54
【问题描述】：

我正在使用两个不同的库来嵌入 YouTube 视频。一个单独工作正常，但如果我将它们都包括在内，第二个（取决于 javascript 包含顺序）不起作用。控制台中没有错误，但我将其范围缩小到 onYouTubeIframeAPIReady() 函数，该函数由两个库使用的 YouTube-API 调用。

第一个库 (jquery.mb.YTPlayer) 调用它（大约第 26 行）：

function onYouTubeIframeAPIReady() {

    console.log('ytplayer onYouTubeIframeAPIReady');

    if (ytp.YTAPIReady) return;
    ytp.YTAPIReady = true;
    jQuery(document).trigger("YTAPIReady");
}

第二个库 (jarallax) 执行此操作（在第 665 行附近）：

// Creates deferred so, other players know when to wait.
window.onYouTubeIframeAPIReady = function () {

    console.log("jarallax onYouTubeIframeAPIReady");

    window.onYouTubeIframeAPIReady = null;
    loadingYoutubeDeffer.resolve('done');
    callback();
};

我添加了console.log()，只记录了一个或另一个。

我该怎么做才能调用这两个函数并正确初始化两个库？

【问题讨论】：

为什么我会为此投反对票？
@mplungjan 这是来自库的原始代码，即使我取消注释，另一个也不会被解雇。

标签： javascript jquery events youtube-api youtube-data-api

【解决方案1】：

由于全局函数 window.onYouTubeIframeAPIReady 被 jarallax 覆盖，我存储了对该函数的任何先前引用并调用它：

// Creates deferred so, other players know when to wait.
var f = window.onYouTubeIframeAPIReady;
window.onYouTubeIframeAPIReady = function () {
    f();
    console.log("jarallax onYouTubeIframeAPIReady");

    window.onYouTubeIframeAPIReady = null;
    loadingYoutubeDeffer.resolve('done');
    callback();
};

【讨论】：