我有一个 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);
}
});
所以我需要强制第二个函数在第一个脚本之后运行,但这不会发生。
最佳答案
根据spec ,执行脚本后,浏览器必须
Fire a simple event named
afterscriptexecute
that bubbles (but is not cancelable) at thescript
element.If the script is from an external file, fire a simple event named
load
at thescript
element.Otherwise, the script is internal; queue a task to fire a simple event named
load
at thescript
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);
关于javascript - 如何在执行完所有 javascript 后调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31315780/