javascript - 加载 Facebook 像素异步

Question

我正在加载 Facebook Pixel 并收到错误，因为调用时未加载脚本。它看起来像这样:

function Load3rdPartyScripts() {

    (function (f, b, e, v, n, t, s) {
        if (f.fbq) return; n = f.fbq = function () {
            n.callMethod ?
            n.callMethod.apply(n, arguments) : n.queue.push(arguments)
        }; if (!f._fbq) f._fbq = n;
        n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0;
        t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s)
    })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', undefined, undefined, undefined);

    fbq('init', 'XXXXXXXXXXXXX'); //problem here
    fbq('track', 'PageView');

}

问题是代码运行时 fbq 未启动。现在我知道我可以将问题代码包装在 setInterval 中并继续检查，直到外部脚本完全加载，但我想知道是否有更好的方法来做到这一点。

Answer 1

我尝试重现这个问题，但没有成功。你的代码完美运行。 fbq 同步附加(因此不需要超时)到window 并将正常调用。检查一下自己:

(function Load3rdPartyScripts() {

    (function (f, b, e, v, n, t, s) {
        if (f.fbq) return; n = f.fbq = function () {
            n.callMethod ?
            n.callMethod.apply(n, arguments) : n.queue.push(arguments)
        }; if (!f._fbq) f._fbq = n;
        n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0;
        t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s)
    })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', undefined, undefined, undefined);

    fbq('init', 'XXXXXXXXXXXXX'); // No problem here!
    fbq('track', 'PageView');

})();

但是

有一些潜在原因可能会导致您的错误:

1. 在浏览器外部运行脚本，破坏了窗口变量的环境。

2. 在浏览器上运行代码但窗口 (Object.freeze(window)) 被卡住，导致 fbq 将未定义

3. Object.seal(window) 也与 freeze() 类似。它将阻止新属性添加到窗口

4. 创建本地作用域namedwindow变量将导致fbq未定义

   function Load3rdPartyScripts() {
       let window = {};  // Notice!
       (function (f, b, e, v, n, t, s) {
           if (f.fbq) return; n = f.fbq = function () {
               n.callMethod ?
               n.callMethod.apply(n, arguments) : n.queue.push(arguments)
           }; if (!f._fbq) f._fbq = n;
           n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0;
           t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s)
       })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js', undefined, undefined, undefined);
   
       fbq('init', 'XXXXXXXXXXXXX'); //problem here
       fbq('track', 'PageView');
   
   }
   Load3rdPartyScripts();