javascript - JS IIFE 破坏 YouTube 跟踪

Question

我很困惑为什么将我的 YouTube 跟踪代码放入 IIFE 后会停止工作。

我的理解是 IIFE 会立即运行，那么为什么包含仅包含 js 的脚本与包含 IFEE 的脚本之间存在差异？

这是我的普通 JS，它可以正常工作:

if ( 0 < ga_options.youtube.length ) {
    var tag = document.createElement( 'script' );
    tag.src = '//www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName( 'script' )[0];
    firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );

    function onYouTubeIframeAPIReady() {
        scroll_events.register_youtube_videos();
    }
}

但是，当我将其包装在 IIFE 中时，如下所示，它不再起作用(不会触发任何跟踪事件)。我正在尝试使用 IIFE 作为将现有代码重组为独立单元的一部分。

请有人解释一下我做错了什么吗？我考虑过范围并尝试在 IIFE 之外使用 var tag 和 var firstScriptTag，但仍然没有成功。

gaEventsVideoTracking = (function(){

    window.console.log( "why no youtube tracking?" );
        if ( 0 < ga_options.youtube.length ) {
            tag = document.createElement( 'script' );
            tag.src = '//www.youtube.com/iframe_api';
            firstScriptTag = document.getElementsByTagName( 'script' )[0];
            firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );

            function onYouTubeIframeAPIReady() {
                scroll_events.register_youtube_videos();
            }
        }
})();

Answer 1

从 YouTube 服务器加载的脚本会调用函数 onYouTubeIframeAPIReady。

由于您使用函数声明来定义它，因此它的本地作用域为 IIFE。这意味着它不是全局的，因此无法供 YouTube 脚本调用。

您可以明确地将其设为全局。

在第一行(IIFE 外部)添加 var onYouTubeIframeAPIReady;，然后将 onYouTubeIframeAPIReady = 放在函数声明前面以使其函数表达式并将其分配给全局变量。