Question

我正在尝试将回调附加到YouTube API事件。假设网站上的脚本有两个独立的脚本-我的脚本和3rd-party。两者都使用JavaScript YouTube API。 API准备好后，我需要运行一段代码。这是代码示例：

第三方脚本：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {

 switch section {
 case 0:
   return CGSize(width: collectionView.bounds.width, height: 70)
 case 1:
   return CGSize(width: 0, height: 0) // NO HEADER WILL BE ADDED
 case 2:
   return CGSize(width: collectionView.bounds.width, height: 70)
 case 3:
   return CGSize(width: 0, height: 0) // NO HEADER WILL BE ADDED
 default:
   return CGSize(width: collectionView.bounds.width, height: 70)
 }

}

我的剧本，绝对相同：

// maybe load YouTube JS API
if (typeof window.YT === 'undefined') {
  var tag = document.createElement('script');
  tag.src = '//www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

// initialize when API is ready
window.onYouTubeIframeAPIReady = function () {
  // do some cool stuff here...
}

在这种情况下，只会触发一个回调-最后一个触发，因为它会覆盖之前分配的回调。

那么，在这里我必须使用哪种编程技术来安全地附加我的回调？谢谢。

Answer 1

据我所知，YouTube API未实现符合标准的事件模型（即没有addEventListener("YouTubeIframeAPIReady", function () { })可用）。

一种选择是将回调存储在数组中，然后仅从可用的单个事件处理程序回调中调用回调，如下所示：

var onYouTubeIframeAPIReadyCallbacks = [];

window.onYouTubeIframeAPIReady = function () {
    var args = arguments;

    onYouTubeIframeAPIReadyCallbacks.forEach(function (callback) {
        callback.apply(this, args)
    });
};

然后不使用window.onYouTubeIframeAPIReady，而是将回调发送到该数组，如下所示：

onYouTubeIframeAPIReadyCallbacks.push(function () {
    // ...
});

onYouTubeIframeAPIReadyCallbacks.push(function () {
    // ...
});

依此类推...

因此，当实际调用事件处理程序时，它将调用数组中的所有回调函数。

如何将多个回调附加到YouTube API事件

1 个答案: