指令碼的動態載入

ladybug7發表於2024-06-09
指令碼

<script> 元素還可以動態生成，生成後再插入頁面，從而實現指令碼的動態載入。

['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    document.head.appendChild(script);
});

這種方法的好處是，動態生成的 script 標籤不會阻塞頁面渲染，也就不會造成瀏覽器假死。但是問題在於，這種方法無法保證指令碼的執行順序，哪個指令碼檔案先下載完成，就先執行哪個。

如果想避免這個問題，可以設定 async 屬性為 false。

['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

上面的程式碼不會阻塞頁面渲染，而且可以保證 b.js 在 a.js 後面執行。不過需要注意的是，在這段程式碼後面載入的指令碼檔案，會因此都等待 b.js 執行完成後再執行。

如果想為動態載入的指令碼指定回撥函式，可以使用下面的寫法。

function loadScript(src, done) {
　　var js = document.createElement('script');
js.src = src;
js.onload = function() {
done();
};
js.onerror = function() {
done(new Error('Failed to load script ' + src));
};
document.head.appendChild(js);
}

相關文章