需要动态更改 iframe答案

【问题标题】：Need to change the iframe dynamically需要动态更改 iframe
【发布时间】：2014-01-21 13:25:42
【问题描述】：

我正在制作一个简单的代码编辑器。两个面板 - 一个用于编写代码，另一个用于显示输出。

对于Html 和Css，下面的代码可以正常工作。但是对于必须在页面加载时执行的javascript，这是行不通的。单击更新页面按钮时，输入代码必须呈现在显示框架上。就像一个简单的alert 页面加载不起作用。

我的问题是我应该如何模仿框架reload 动作。我对框架的src 属性没有任何值，因此无法重新加载它。

<html>
<body>
<script>
function update()
{
   var x = document.getElementById('mycode').value;
   frames['display'].document.documentElement.innerHTML = x;
}
</script>

<input onclick="update();" type="button" value="Update page">
<textarea id="mycode"></textarea>
<iframe id="display"></iframe>

</body>
</html>

在文本区域中输入此代码时，它不会在框架中起作用。

<html>
<script>alert(123);</script>
</html>

但是对于普通的 html，css 是可以的。我应该如何制作像上面这样只在页面加载工作期间在框架中执行的 javascript 代码？

编辑器适用于这种事件驱动的 javascript

<html>
<input onclick="alert(123);" type="button" value="Works">
</html>

【问题讨论】：

javascript 只能访问本地 iframe（由您的代码创建或从同一服务器加载）。
@Epsil0neR 单击更新页面按钮时，文本区域中的代码将加载到框架中。

标签： javascript html iframe

【解决方案1】：

使用

<input type="button" id = "btn" value="Update Page" />
<textarea id="mycode"></textarea>
<iframe id="display"></iframe>

作为您的 HTML 和

document.getElementById('btn').onclick = function()
{
    var x = document.getElementById('mycode').value;
    document.getElementById('display').contentDocument.write(x);
}

作为您的 Javascript。

contentDocument.write 用于编写 iframe 的 innerHTML。见set innerHTML of an iframe

DEMO

【讨论】：