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

Question

我有一个 HTML 字符串:

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

然后我将其附加到 HTML:

document.body.innerHTML += str;

并且附加了内容但脚本不执行，有没有办法强制执行？

Answer 1

首先，一个警告:当然，只对您信任的脚本执行此操作。 :-)

有几种方法。基本上，您需要:

1. 获取脚本的文本，并

2. 运行它

获取文本

一个选择是继续添加它，然后找到它并获取它的文本:

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

在过时的浏览器上，您可能需要对 textContent 与 innerText 进行特征检测。

您可能想给它一个识别特征(id、class 等)，这样您就不必像那样按位置找到它。

或者，您可以执行 PrototypeJS 库的操作，并尝试使用正则表达式从字符串中获取它。你可以找到他们这样做的源代码 here (查找 extractScripts)。

运行它

获得脚本文本后，您有多种选择:

• 对其使用间接 eval(又名“全局eval”):(0, eval)(text )。这与eval(text)不相同；它在全局范围内而不是本地范围内运行代码。

• 新建一个script元素，将其text设置为text，并添加

  var newScript = document.createElement("script");
  newScript.textContent = text;
  document.body.appendChild(newScript);
  

  如果这样做，删除原始文件可能是有意义的，尽管这并不重要。

在添加 script 元素后获取文本并使用 indirect 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);

---

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