在iframe中运行Javascript / jQuery

Question

我目前正在开发一个网页编辑器，您可以在其中输入HTML，CSS和JavaScript代码，并实时查看结果。类似于JSBin或JSFiddle的东西。 （我这样做是为了获得离线编辑器）

我已经遇到过很多问题，尤其是涉及到CSS时，我通过使用iframe并将所有代码注入其中来解决它们。在你输入一些JavaScript之前，这种方法效果非常好。

我在<script></script>之间发送代码，但与CSS不同，它不会运行。有点奇怪的是，当我输入类似$('button').css('color', 'red');的内容时，编辑器的按钮会受到影响，但不会影响我的iframe。完全与我的预期相反。我尝试了很多东西，在论坛上查看了很多主题，但没有任何效果。我还尝试在iframe中加载空白页面。在这种情况下，JavaScript会运行但是无法编辑iframe中的代码！这是怎么回事？我哪里错了？提前感谢您的帮助！

这是我的编辑：https://jsbin.com/tuqite/edit?html,js,output/

Answer 1

尝试像这样更新iframe的内容。

// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);

直接更新iframe DOM就像你正在做的那样可能不是正确的方法。