写在前面
今天看到之前前辈写的一个js加载后执行回调的函数,看到了一些之前没有注意的用法,在这里做一下总结。
script加载
IE的script 元素只支持onreadystatechange事件,不支持onload事件。
FireFox的script 元素不支持onreadystatechange事件,只支持onload事件。
export function getScript(url, callback) {
var script = document.createElement('script');
script.type = "text/javascript";
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
if (callback) {
script.parentNode.removeChild(script);
callback();
}
}
}
} else {
script.onload = function () {
if (callback) {
script.parentNode.removeChild(script);
callback();
}
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
document加载
当document文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时,返回"interactive",并引发DOMContentLoaded事件。当文档加载完成时,返回"complete",并引发load事件。
readystatechange事件会在document对象上的readyState属性的属性值发生变化时触发.
// 模拟DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}
// 模拟 load事件
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}