javascript - 如何在执行完所有 javascript 后调用函数

Question

我有一个 javascript 函数，它对 API 进行外部调用，然后将一些 HTML 注入(inject)到我的页面中。

现在我想执行一个函数来检查这个脚本，如果它没有将 HTML 注入(inject)到我的页面中，我想在这里做一些其他的事情。问题是我无法在 document.ready 和 window.load 上调用此函数，因为外部 API 的第一个脚本在这两个事件之后执行。

脚本如下:

(function () {
    var o = ccs_cc_args; o.push(['_SKey', '35455c2f']); o.push(['_ZoneId', '311e740881']);
    var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.async = true;
    sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.cnetcontent.com/jsc/h.js';
    var n = document.getElementsByTagName('script')[0]; n.parentNode.insertBefore(sc, n);
})();

现在我写的函数如下:

$(document).ready(function () {
 if ($("#ccs-inline-content").html() == "") {
          $('#ProductDetails > ul li:has(a[href="#tabs-1"])').hide()
           $("#ProductDetails").tabs('refresh');
            $("#ProductDetails").tabs('option', 'active', 1);
        }
    });

所以我需要强制第二个函数在第一个脚本之后运行，但这不会发生。

Answer 1

根据spec ，执行脚本后，浏览器必须

6. Fire a simple event named afterscriptexecute that bubbles (but is not cancelable) at the script element.

7. If the script is from an external file, fire a simple event named load at the script element.

   Otherwise, the script is internal; queue a task to fire a simple event named load at the script element.

因此，您可以向 script 元素添加 load 或 afterscript 事件监听器:

scriptElement.addEventListener('load', callback);

如果您没有对 script 元素的引用，则可以使用事件委托(delegate)并将事件监听器添加到祖先，例如文档。

请注意，这仅适用于 afterscriptexecute，它会冒泡，但不适用于 load，它不会冒泡。

另请注意，事件监听器可能会针对多个 script 元素运行，因此您可能必须过滤所需的元素。

document.addEventListener('afterscriptexecute', function(e) {
  if(e.target.src === url)
    callback();
});

您还可以在捕获阶段使用事件委托(delegate)。那么 afterscriptexecute 和 load 都会起作用，并且其他监听器停止事件传播(这将避免执行回调)的机会将会降低。

document.addEventListener('load', function(e) {
  if(e.target.tagName.toLowerCase() == 'script' && e.target.src === url)
    callback();
}, true);