执行动态生成的Javascript

Question

我正在阅读这个问题,接受的答案是:

通过设置元素的innerHTML属性添加的脚本不会被执行.

但是当我尝试<script>在以下代码中更改第一个标记的innerHTML时:

<script></script>
<script>
document.querySelectorAll("script")[0].innerHTML = 'console.log("Test")';
</script>

我可以看到<script>正在执行的元素的注入代码(console.log()函数输出Test).

此外,如果我删除第一个空<script>标记(从而使第一个元素[0] 引用脚本本身),脚本在DOM中更改,但代码永远不会执行.

<script>
document.querySelectorAll("script")[0].innerHTML = 'console.log("Test")';
</script>

什么促使这种行为？

Answer 1

这在脚本编写中进行了描述。在准备剧本的时候，

1. 在第 2 步，“解析器插入”标志被删除：

   如果该元素设置了“parser-inserted”标志，则将 was-parser-inserted设置为 true 并取消设置该元素的“parser-inserted”标志。

2. 在第 4 步，在恢复“解析器插入”标志之前，这些步骤被中止

   如果该元素没有src属性，并且其子节点（如果有）仅由注释节点和空Text节点组成，则用户代理此时必须中止这些步骤。该脚本未执行。

因此，当你修改它时，它会再次准备：

当script未标记为 “解析器插入”的元素遇到以下列表中列出的事件之一时，用户代理必须同步准备该 script元素：

• 当根据 DOM插入节点时，该元素script将被插入到文档中，位于同时插入的树顺序中较早的任何其他元素之后。scriptDocument
• 该script元素位于 a 中Document，并且在当时插入的任何元素之后将节点或文档片段插入到该元素中。scriptscript
• 该script元素位于 a 中Document，并且具有一个src属性集，而之前该元素没有这样的属性。

一旦脚本运行，修改内容将不会执行它们，因为脚本准备将中止：

如果该script元素被标记为“已启动”，则用户代理此时必须中止这些步骤。该脚本未执行。