gpt4 book ai didi

javascript - 如何将 Javascript 文件动态加载到 HTML 中

转载 作者:行者123 更新时间:2023-12-04 01:03:44 24 4
gpt4 key购买 nike

我对将 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

我尝试过的事情(或变体)

error loading javascript files dynamically

我也一直在添加 .onload.onreadystatechange对各种对象没有成功。

我还不太明白的事情

Dynamically load a JavaScript file

How do you import multiple javascript files in HTML index file without the bloat?

Dynamically load a JavaScript file

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,但我不确定。

我的存储库有问题: Widgets

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

仅供引用

Native JS 理想,对 JQuery 不感兴趣。

我只关心对 Chrome、Firefox、Opera、Safari(桌面/移动)的支持

最佳答案

所以我发现问题出在我解析代码的顺序上。花了很长时间才找到,因为我的代码本质上没有任何问题,但顺序是错误的。

我以正确的顺序调用所有内容,但是在我的网络面板中解决问题的顺序不正确。

一旦我确定了将事物加载到 DOM 中的顺序,一切都按预期工作。

修复 #1

因为我的 XMLHttpReqest 应该是异步的,所以我将所有调用放入一个 Javascript 文件中,以便它们同步运行。

在加载引用这些文件的函数调用之前,我需要在标签中加载 Javascript 文件。

我包装在 window.onload = function(){} 中的函数调用.

基本上我的最终解决方案是任何 <script>code</script>我动态放置在 示例.html 我会换成 window.onload = function(){} .

<script>window.onload = function(){ code }</script>
修复 #2

我正在使用 onload 包装器 window.onload = function(){}在一个没有意义的位置。此外,它可能在调试时嵌套在另一个 window.onload 函数中,这可能没有帮助。

关于javascript - 如何将 Javascript 文件动态加载到 HTML 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59508451/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com