javascript - 在 iframe 内运行 Javascript/jQuery

Question

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

我已经遇到了很多问题，尤其是 CSS 方面的问题，但我通过使用 iframe 并将所有代码注入(inject)其中解决了这些问题。在您输入一些 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 可能不是正确的方法。