javascript - 如何将 Javascript 文件动态加载到 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