寫在前面
今天看到之前前輩寫的一個js加載后執(zhí)行回調(diào)的函數(shù),看到了一些之前沒有注意的用法吟税,在這里做一下總結(jié)凹耙。
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"异旧。當文檔結(jié)束渲染但在加載內(nèi)嵌資源時意述,返回"interactive",并引發(fā)DOMContentLoaded事件吮蛹。當文檔加載完成時,返回"complete"荤崇,并引發(fā)load事件。
readystatechange事件會在document對象上的readyState屬性的屬性值發(fā)生變化時觸發(fā).
// 模擬DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}
// 模擬 load事件
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}