Question

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

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

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

Hello World.

感谢您的帮助。

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

希望这与你想要的一致

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

1 个答案: