Question

我有一个HTML字符串：

var str = '<div><p>Examplee</p></div><script>alert("testing!")</script>';

然后我将其附加到HTML：

document.body.innerHTML += str;

并附加了内容，但脚本没有执行，是否有办法强制它？

Answer 1

首先，需要注意的是：只能使用您信任的脚本执行此操作。： - ）

有两种方法。基本上，你需要：

获取脚本文本，
运行

获取文本

一个选项就是继续添加它，然后找到它并抓住它的文字：

document.body.innerHTML += str;
var scripts = document.querySelectorAll("script");
var text = scripts[scripts.length - 1].textContent;

在过时的浏览器上，您可能需要功能检测textContent与innerText。

你可能想给它一个识别特征（id，class等），所以你不必按照这样的位置找到它。

或者，您可以执行PrototypeJS lib所做的操作，并尝试从带有正则表达式的字符串中获取它。您可以找到执行该here的源代码（查找extractScripts）。

运行

获得脚本文本后，您有以下几种选择：

在其上使用间接 eval（又名＆＃34;全球eval＆＃34;）：(0, eval)(text)。这与eval(text)相同;它在全局范围内运行代码，而不是本地范围。
创建一个新的脚本元素，将其文本设置为文本，然后添加
```
var newScript = document.createElement("script");
newScript.textContent = text;
document.body.appendChild(newScript);
```
如果这样做，删除原件可能是有意义的，虽然它并不重要。

在添加script元素后使用间接 eval抓取var str = '<div><p>Examplee</p></div><script>alert("testing!")<\/script>'; document.body.innerHTML += str; var scripts = document.querySelectorAll("script"); (0, eval)(scripts[scripts.length - 1].textContent);元素的文本的示例：

＆＃13;

+=

＆＃13;

大概你没有在document.body.innerHTML上真正使用all，它为整个页面构建一个HTML字符串，附加到它，撕下整个页面，然后解析新的HTML建立一个新的。我认为这只是你问题中的一个例子。

Answer 2

jQuery提供 $。getScript（url [，success]）功能。然后，您可以从单独的jquery文件加载和执行代码，这有助于管理和控制执行流程。

基本上将您的alert("testing!")脚本放在一个单独的文件中，例如同一目录中的alert.js。

然后，您可以在将员工添加到HTML时运行脚本。

var str = '<div><p>Examplee</p></div>';
var url = 'alert.js';    
document.body.innerHTML += str;    
$.getScript(url);

我知道这可能看起来更多，但更好的做法是将您的javascript保持在HTML之外。您还可以使用回调在警报后收集用户数据，或者通知另一个进程用户已收到警报。

$.getScript(url, function(){
  //do something after the alert is executed.
});

例如，在执行警报后添加员工可能是更好的设计。

var str = '<div><p>Examplee</p></div>';
var url = 'alert.js'; 
$.getScript(url, function(){
  document.body.innerHTML += str;
});

编辑：我知道jQuery没有被标记，但我也没有请求成为这个问题的接受答案。我只为可能遇到同样问题而且可能正在使用jQuery的人提供另一种选择。如果是这种情况，$ .getScript是一个非常有用的工具，专门针对这个确切的问题。

Answer 3

您应该在加载后更改HTML。试试这个：

document.addEventListener("DOMContentLoaded", function(event) {
    document.body.innerHTML += str;
});

将脚本附加到HTML后运行脚本

3 个答案:

获取文本

运行