将 iframe src 更改为用户输入的 HTML 代码
Posted
技术标签:
【中文标题】将 iframe src 更改为用户输入的 HTML 代码【英文标题】：Change iframe src to user inputted HTML code 【发布时间】：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.
感谢您的帮助。
【问题讨论】：
您的网页将成为恶意编码人员的天堂。 【参考方案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 »</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 我第三次更新了我的答案，所以请忽略上面的评论。在新的答案中，我让脚本在负载下运行。以上是关于将 iframe src 更改为用户输入的 HTML 代码的主要内容，如果未能解决你的问题，请参考以下文章
将 iframe URL 更改为另一个协议会重新加载页面，但不会在从计时器触发时重新加载
当使用 PHP 在后端验证电子邮件时，如何将输入提交从禁用更改为启用？
jQuery - 更改 iframe src 时仅在第二次单击时触发
结合两个代码片段？将用户输入的 Youtube url 转换为嵌入 url，然后将 iframe src 替换为转换后的 url