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

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

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

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

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