將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代碼

回答

相關問題