簡體   English   中英

如何將 Javascript 文件動態加載到 HTML 中

[英]How to Dynamically Load Javascript File into HTML

我對將 JS 文件動態加載到 DOM 中需要什么感到有些困惑。

當我包含在我的 HTML 文件中時,example.js 將正常運行。

當我包含它時,它會添加到 DOM 但不會運行它。

我以前認為我必須重新創建,然后將其 append() 到標簽。 我感覺好像我錯過了關鍵的一步,我只是不知道那一步是什么。

示例.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="example.js"></script><!-- working -->
    <script src="add-example-dynamically.js"></script><!-- not working -->
</head>
<body>
    <script>
        execute( anyScriptElement ); // not working
    </script>
</body>
</html>
</body>
</html>

add-example-dynamically.js

function toExecutable( tagElement ){
    // Duplicate the provided tag as a new element in order for all tags to run the 'src' attribute after adding it to the DOM
    // Required to run: <script src=""></script>
    var newTag = document.createElement( tagElement.tagName );

    if( tagElement.hasAttributes() ){
        // Check if the tag has attributes
        for( var countAttributes = 0; countAttributes < tagElement.attributes.length; ++countAttributes ){
            var name = tagElement.attributes[ countAttributes ].name;
            var value = tagElement.attributes[ countAttributes ].value;
            newTag.setAttribute( name, value );
        }
    }
    if( tagElement.textContent ){
        // Check if the tag has content within it
        newTag.textContent = tagElement.textContent;
    }
    return newTag;
}
function execute( anyScriptElement ){
    var tag = toExecutable( anyScriptElement );
    document.getElementsByTagName( 'head' )[ 0 ].append( tag );
}
var theScript = document.createElement( 'script' );
theScript.src = 'example.js';
execute( theScript ); // not working

我嘗試過的事情(或其中的變種)

動態加載javascript文件時出錯

我也一直在向各種對象添加.onload.onreadystatechange ,但沒有成功。

我還不太明白的事情

動態加載 JavaScript 文件

如何在 HTML 索引文件中導入多個 javascript 文件而不會出現膨脹?

動態加載 JavaScript 文件

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://cleverbeagle.com/blog/articles/tutorial-how-to-load-third-party-scripts-dynamically-in-javascript

https://humanwhocodes.com/blog/2009/07/28/the-best-way-to-load-external-javascript/

我認為不能解決我的問題的事情

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

https://gomakethings.com/a-better-way-to-load-scripts-with-javascript-or-why-document-write-sucks/

想法

我有一種感覺,正確的解決方案不涉及 XMLHttpRequest 或 Promises,但我不確定。

我有問題的存儲庫:小部件

如果有人能指出我正確的方向,那將幫助我弄清楚我需要研究什么。

供參考

Native JS 理想,對 JQuery 不感興趣。

我只關心對 Chrome、Firefox、Opera、Safari(桌面/移動)的支持

所以我發現問題出在我解決代碼的順序上。 花了很長時間才找到,因為我的代碼本身沒有任何問題,但順序是錯誤的。

我以正確的順序調用所有內容,但在我的網絡面板中解決的順序不正確。

一旦我修復了加載到 DOM 中的順序,一切都按預期工作。

修復 #1

因為我的 XMLHttpReqests 應該是異步的,所以我將所有調用放入一個 Javascript 文件中,以便它們同步運行。

在加載引用這些文件的函數調用之前,我需要在標簽中加載 Javascript 文件。

我包裝在window.onload = function(){}的函數調用。

基本上,我的最終解決方案是針對我動態放置在example.html 中的任何<script>code</script>我將包裝在window.onload = function(){}

<script>window.onload = function(){ code }</script>

修復 #2

我在一個沒有意義的位置使用了 onload 包裝器window.onload = function(){} 它也可能在調試時嵌套在另一個 window.onload 函數中,這可能沒有幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM