需要动态更改 iframe
Posted
技术标签:
【中文标题】需要动态更改 iframe【英文标题】：Need to change the iframe dynamically 【发布时间】：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 单击更新页面按钮时，文本区域中的代码将加载到框架中。 【参考方案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
【讨论】：
以上是关于需要动态更改 iframe的主要内容，如果未能解决你的问题，请参考以下文章
如何根据 iframe 中的动态内容更改 iframe 的高度？
编写 jQuery 以在单击时更改动态 iframe 的尺寸 [关闭]