目前,我有一个 javascript 可调用函数(不添加全局变量),可以将脚本添加到头部。
Onload 对于网站最初加载后的页面很有用,但我正在等待加载更大的脚本,直到需要它们为止,因为考虑到许多人不需要它们。
以下代码适用于某些脚本,但不适用于某些较大的脚本...
function include(script) {
var head= document.getElementsByTagName('head')[0];
var newScript= document.createElement('script');
newScript.type= 'text/javascript';
newScript.src= script;
head.appendChild(newScript);
}
function doThething(){
include('foo');
include('bar');
if(document.readyState === "complete") {
// do something needing foo and bar
} else {
window.addEventListener("onload", function () {
// do something needing foo and bar
}
}
}
对于一些脚本,上面的代码工作得很好。对于其他的(尤其是客户端没有的较大的),它会尝试在 foo 加载之前执行。我无法更改 foo 因为它是一个更大的场外公共(public)图书馆。
如何才能让 dom 等待新内容完成加载并再次启动加载,或者确保 foo 在我 doTheThing 之前加载?
最佳答案
您需要脚本加载,而不是文档加载。请参阅此处已接受的答案:
'onload' handler for 'script' tag in internet explorer
这是值得欣赏的代码:
var head = document.getElementsByTagName("head")[0] || document.documentElement;
var script = document.createElement("script");
if ( s.scriptCharset ) {
script.charset = s.scriptCharset;
}
script.src = s.url;
// Handle Script loading
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if ( !done && (!this.readyState ||
this.readyState === "loaded" || this.readyState === "complete") ) {
done = true;
jQuery.handleSuccess( s, xhr, status, data );
jQuery.handleComplete( s, xhr, status, data );
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
head.insertBefore( script, head.firstChild );
关于Javascript动态脚本通过函数加载...如何重新执行onload或readyState?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32847752/