有没有在iframe中注入javascript代码执行而不删除并重新发布包含它的脚本标记？

Question

语境:

我正在构建一个实时的HTML,CSS和Javascript编辑器.它可以在这里访问.

源可以在这里访问.

题:

是否可以运行注入iframe的javascript代码而无需重复删除并添加包含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(考虑范围),但要注意使用eval可能很糟糕.