将 iframe src 更改为用户输入的 HTML 代码答案

【问题标题】：Change iframe src to user inputted HTML code将 iframe src 更改为用户输入的 HTML 代码
【发布时间】：2016-04-20 05:24:33
【问题描述】：

作为一个小型项目，我正在开发一个旨在帮助人们在 GCSE 级别（14-16 岁）学习计算机科学基础知识的网站，我想创建一个类似于 w3schools 的 TryIt 编辑器的系统.我想设置一个 textarea、iframe 和按钮，以便当用户在 textarea 中输入 HTML 代码并按下按钮时，iframe 将显示生成的网页。例如，假设用户在 textarea 中输入了这个：

<html>
<body>
<p>Hello World.</p>
</body>
</html>

然后他们按下按钮，iframe 就会显示：

Hello World.

感谢您的帮助。

【问题讨论】：

您的网页将成为恶意编码人员的天堂。

标签： javascript html iframe textarea src

【解决方案1】：

我很无聊，所以我更深入地研究了代码并删除了一些你可能不需要的无意义的东西。

这是我的更新答案：：

<script type="text/javascript">
function submitTryit() {
  var text = document.getElementById("textareaCode").value;
  var ifr = document.createElement("iframe");
  ifr.setAttribute("frameborder", "0");
  ifr.setAttribute("id", "iframeResult");  
  document.getElementById("iframewrapper").innerHTML = "";
  document.getElementById("iframewrapper").appendChild(ifr);
  var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
  ifrw.document.open();
  ifrw.document.write(text);  
  ifrw.document.close();
}
</script>

	<div class="wrapper1">
        <div class="headerText">Edit This Code:</div>
            <button class="seeResult" type="button" onclick="submitTryit()">See Result &raquo;</button>
	</div>
	<div class="textareawrapper">
        <textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" spellcheck="false">
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Hello World
</body>
</html>
        </textarea>
        <form autocomplete="off" style="margin:0px;display:none;">
            <input type="hidden" name="code" id="code" />
            <input type="hidden" id="bt" name="bt" />
        </form>
	</div>
    <div class="iframecontainer">
        <div class="iframe">
        	<div class="headerText">Result:</div>
        	<div id="iframewrapper" class="iframewrapper">
        	</div>
        </div>
    </div>
    
<script>submitTryit()</script>

希望这是你想要的

【讨论】：

不完全是，我想创建类似于 TryIt 编辑器的东西，不只是使用它，但还是谢谢。
更新了答案，如果您希望结果出现在页面加载时，请在 html 标记的末尾插入“”
@Mr1flapjack1 我第三次更新了我的答案，所以请忽略上面的评论。在新的答案中，我让脚本在负载下运行。