javascript - 有没有办法在 iframe 中注入(inject) javascript 代码来执行而不删除并重新附加包含它的脚本标签？

Question

上下文:

我正在构建一个实时 HTML、CSS 和 Javascript 编辑器。可以访问here .

源码可以访问here .

问题:

是否可以运行注入(inject) iframe 的 javascript 代码，而无需重复删除和添加包含来自 DOM 树的代码和向 DOM 树添加代码的 <script> 标签？由于 DOM 操作是一项代价高昂的事情，我想尝试消除多个 DOM 操作。相反，我希望能够只更改 <script> 标记的 textContent 并让它运行我插入的新代码。

谢谢!

Answer 1

如果你不介意使用邪恶 eval ，您可以在 iframe 的窗口中重新评估大多数 JavaScript，例如

function someFunction(){                                // any function
    console.log(document.body.children);
}

someFunction();                                         // see normal output

var ifrm  = document.getElementsByTagName('iframe')[0], // your iframe
    iwind = ifrm.contentWindow;                         // the iframe's window

iwind.eval( someFunction.toString() );                  // re-evaluate function with eval from iframe
iwind.someFunction();                                   // see new output - output is in iframe's context

对比

iwind.someFunction = someFunction;                      // set variable
iwind.someFunction();                                   // same as calling someFunction() from parent

它应该适用于大多数有效的 JavaScript(考虑范围)，但请注意 using eval can be bad .