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

-4

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

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

然后他们按下按钮，并在iframe显示：

Hello World.

感谢您的帮助。

来源

2016-01-14 Mr1flapjack1

你的网页将成为恶意程序员天堂是什么线。 – Teemu

我很无聊，所以我深入了解代码并摆脱了一些你可能不需要的无意义的东西。

这里是我的答案更新::

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

\t <div class="wrapper1"> 
 
     <div class="headerText">Edit This Code:</div> 
 
      <button class="seeResult" type="button" onclick="submitTryit()">See Result &raquo;</button> 
 
\t </div> 
 
\t <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> 
 
\t </div> 
 
    <div class="iframecontainer"> 
 
     <div class="iframe"> 
 
     \t <div class="headerText">Result:</div> 
 
     \t <div id="iframewrapper" class="iframewrapper"> 
 
     \t </div> 
 
     </div> 
 
    </div> 
 
    
 
<script>submitTryit()</script>

希望这是你想要

来源

2016-01-14 21:57:02

不是，我想创建类似于TryIt编辑器的东西，不只是使用它，但是无论如何感谢。 – Mr1flapjack1

更新了答案，同样如果你希望结果出现在页面上，插入''在html标记末尾 –

@ Mr1flapjack1我第三次更新了我的答案，所以忽略了上面的评论。在新的答案中，我使脚本无需加载。 –

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

回答

相关问题