如何运行使用 innerHTML 添加到页面的脚本？ [复制]

Posted 2023-02-21

【中文标题】如何运行使用 innerHTML 添加到页面的脚本？ [复制]

【英文标题】：How can I run script that was added to the page with innerHTML? [duplicate]

【发布时间】：2012-05-22 08:58:20

【问题描述】：

可能重复：Executing <script> elements inserted with .innerhtmlDynamically Inserting <script> tags into HTML on Page Load

我的意思是，如果我在 .innerHTML 中写入包含

<script type="text/javascript" src="source.js"></script>

或

<script type="text/javascript"> // embedded code here </script>

嵌入代码不运行，链接代码也不运行。它“死了”。

有没有办法手动触发？

【问题讨论】：

javascript 控制台中的错误怎么办？

Dynamically Inserting <script> tags into HTML on Page Load 或 How Do I Load a JavaScript File Dynamically? 或 How to Load JavaScript Dynamically 或 Load JavaScript Dynamically 或 ...

的重复

这些标签是如何添加的？

@Phrogz，昆汀，这是对一个问题的 3 个不同答案。这不是重复的。

@Rocket - 通过 .innerHTML 写入...我从 ajax 响应中获取数据。

【参考方案1】：

您需要将 javascript 添加到 head 标签中， 即

var head = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
head.appendChild(newScript);

（这是很常见的事情，但我从这里复制了代码：http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS）

---

附注： 如果你使用 jQuery，你会很想写以下代码：

<script>
    [....]
    $( "head" ).append( "<script src='myScript.js'></script>" ); 
    [....]
</script>

请注意，这不起作用，因为 javascript 解析器将看到第一个 </script> 并在此处停止解析。

【讨论】：

所以我认为附加（ appendChild ）与出于某种原因进行 .innerHTML 写入不同？

我认为这是关于添加到头部，而不是如何添加它......如果你在带有 jquery 的页面上打开 javascript 控制台并尝试你可以看到这两个工作：$("head").html("<script>alert('x');</script>")以及 $("head").append("")