我见过很多类似的问题，但我的问题略有不同。
我编写了一个 HTML 代码，它可以在 <div> 中执行另一个 HTML 代码。 。页面如下所示:
该页面的代码是这样的:
<html>
<meta name="viewport" content="width=device-width"/>
<style>
html, body{margin: 0; padding: 0;}
textarea {width:100%; height: 28%;}
div {display: block; width: 100%;}
</style>
<body onload="loadData()" onbeforeunload="storeData()" onunload="this.onbeforeunload()">
<div style="overflow: auto;">
<textarea id="code"></textarea>
</div>
<div>
<button onclick="run()" style="float: left;">Run</button>
<button onclick="setSize()" style="float: right;">Set size</button>
<input type="number" id="size" style="float: right; text-align: right;"/>
</div>
<div id="result" style="overflow: auto; height: 70%; border-top: 2px solid black;"></div>
</body>
<script>
const editor=document.getElementById('code');
function run()
{
var res=document.getElementById('result');
var input=editor.value;
res.innerHTML=input;
}
function setSize()
{
editor.style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
}
function storeData()
{
var data=document.getElementById("code").value;
var txtSize=document.getElementById("size").value;
localStorage.setItem("stored", data);
localStorage.setItem("size", txtSize);
}
function loadData()
{
var data=localStorage.getItem("stored");
var txtSize=localStorage.getItem("size");
document.getElementById("code").value=data;
document.getElementById("size").value=txtSize;
editor.style.fontSize=txtSize;
document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
}
</script>
</html>
除了一件事之外，它的工作绝对正确。问题是，如果 <button>创建后 onclick属性具有以下代码:document.write('Some text'); ，然后整个页面被清除。请参阅这些屏幕截图:
那么，您能告诉我有什么方法可以确保不会对原始页面进行任何更改吗？ 请帮助 10 类的学生。
最佳答案
您想要的不是将“result”作为常规 div 元素(代表实际页面的一部分)，而是嵌入整个单独的页面/上下文，这就是iframe用于。
我成功地通过将 div 替换为 iframe 来实现您想要的目标，并将“run”方法中的第一行替换为:
var res=document.getElementById('result').contentDocument.body;
查看此fiddle举个例子。
关于javascript - 通过 JavaScript 在 DIV 内执行 HTML 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55551834/