Question

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

对于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>

当在textarea中输入此代码时，它不会在框架中工作。

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

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

编辑器适用于此类事件驱动的javascript

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

Answer 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

1 个答案: