加载 Facebook 像素异步

Question

我正在加载 Facebook 像素并收到错误消息，因为调用时未加载脚本。这是它的样子：

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 被同步附加（所以不需要timeout）到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. 在浏览器上运行代码但冻结window (Object.freeze(window)) 导致fbq 将是undefined

3. Object.seal(window) 也像 freeze()。它将阻止将新属性添加到window

4. 创建一个本地范围命名window变量将导致fbq成为undefined

   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();