如何在動態添加的 js 文件中引用代碼？

Question

我嘗試動態添加js文件。
我在頁面檢查器中找到了幾個指南，它們看起來都有效……但是，我無法在新添加的文件中引用任何代碼。

我的三個代碼示例看起來工作正常……但不是。

//v1
var th = document.getElementsByTagName('head')[0];
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', scriptName);
th.appendChild(s);
DevExpress.localization.loadMessages(RddsDataNavigator_LanguagePack_en);

//v2
var s = document.createElement('script');
s.setAttribute('src', scriptName);
document.head.appendChild(s);
DevExpress.localization.loadMessages(RddsDataNavigator_LanguagePack_en);

//v3
let myScript = document.createElement("script");
myScript.setAttribute("src", scriptName);
document.head.appendChild(myScript);
DevExpress.localization.loadMessages(RddsDataNavigator_LanguagePack_en);

我必須以不同的方式附加腳本還是我的參考調用錯誤/不可能？

准確解釋我的要求的指南似乎對我不起作用？！
https://www.kirupa.com/html5/loading_script_files_dynamically.htm
動態添加js到asp.net文件

在此先感謝您的幫助

Answer 1

添加腳本元素的三種方法本質上是相同的^* 。

由於動態添加的腳本元素不會同步加載資源，因此您需要監聽全局對象上的load事件。 DOMContentLoaded是另一個想法，但它觸發得太快，因為它不等待資源加載。

這是一個異步加載 jQuery 的演示。 輸出顯示了jQuery變量的類型，一旦該資源被加載，它將是“函數”：

 let scriptName = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"; // v3 let myScript = document.createElement("script"); myScript.setAttribute("src", scriptName); document.head.appendChild(myScript); console.log("Synchronous, jQuery =", typeof jQuery); document.addEventListener("DOMContentLoaded", function () { console.log("After DOMContentLoaded event, jQuery =", typeof jQuery); }); window.addEventListener("load", function () { console.log("After load event, jQuery =", typeof jQuery); });

_{* 第一個版本也定義了 type 屬性，但 HTML5 規范敦促作者省略該屬性，而不是提供冗余的 MIME 類型。}

Answer 2

考慮這個工作示例：

 // dyn.js window.zzz = 1;

 <!--index.html--> <html> <head> <script> function includeJs(url) { if (!url) throw "Invalid argument url"; var script = document.createElement("script"); script.src = url; document.head.appendChild(script); } includeJs("dyn.js"); function documentLoaded() { alert(window.zzz) } </script> </head> <body onload="javascript:documentLoaded()"> </body> </html>

您的代碼與此代碼之間的一個明顯區別是，上面的示例在文檔加載期間加載腳本，而腳本代碼的使用發生在文檔加載完成之后。

如果您需要根據某些運行時參數延遲加載動態腳本，這里有一些選項：

如果您可以控制動態加載腳本，則可以在加載程序腳本中添加一個函數並在動態加載腳本的最后一行調用它：

 // dyn.js window.zzz = 1; if(typeof(dynamicLoadingFinished) != "undefined") dynamicLoadingFinished();

 <!--index.html--> <html> <head> <script> function includeJs(url) { if (!url) throw "Invalid argument url"; var script = document.createElement("script"); script.src = url; document.head.appendChild(script); } function documentLoaded() { includeJs("dyn.js"); window.dynamicLoadingFinished = function() { alert(window.zzz) } } </script> </head> <body onload="javascript:documentLoaded()"> </body> </html>

另一種可能的方法是使用舊的XMLHttpRequest 。 它將允許您強制同步加載（這是不可取的，因為它會在加載期間阻止所有 JavaScript 和交互，但在某些情況下可以使用）：

 // dyn.js window.zzz = 1;

 <!--index.html--> <html> <head> <script> function includeJs(url) { if (!url) throw "Invalid argument url"; var request = new XMLHttpRequest(); request.open("GET", url, false); request.send(); var script = document.createElement("script"); script.text = request.responseText; document.head.appendChild(script); } function documentLoaded() { includeJs("dyn.js"); alert(window.zzz) } </script> </head> <body onload="javascript:documentLoaded()"> </body> </html>

或者異步加載腳本並等待請求完成：

 // dyn.js window.zzz = 1;

 <!--index.html--> <html> <head> <script> function includeJs(url, finished) { if (!url) throw "Invalid argument url"; var request = new XMLHttpRequest(); request.open("GET", url, true); request.onreadystatechange = function () { if (request.readyState == 4 || request.readyState == 0) { if (request.status == "200") { var script = document.createElement("script"); script.text = request.responseText; document.head.appendChild(script); return finished(); } else throw request.responseText; } }; request.send(); } function documentLoaded() { includeJs("dyn.js", () => alert(window.zzz)); } </script> </head> <body onload="javascript:documentLoaded()"> </body> </html>

我相信 AJAX 示例也可以使用更現代的fetch API ( https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API ) 編寫。

如何在動態添加的 js 文件中引用代碼？

問題描述

2 個解決方案

解決方案1
1 已采納 2020-09-09 08:33:46

解決方案2
1 2020-09-09 09:08:21

如何在動態添加的 js 文件中引用代碼？

問題描述

2 個解決方案

解決方案1 1 已采納 2020-09-09 08:33:46

解決方案2 1 2020-09-09 09:08:21

解決方案1
1 已采納 2020-09-09 08:33:46

解決方案2
1 2020-09-09 09:08:21