HTML textarea 中的代码，弹出结果预览的按钮

Question

除了主要部分，我已经完成了作业中的所有内容。我不知道如何让我的代码将我的文本区域的内容读取为 HTML 代码并在新的 window 中显示结果。我什至不知道如何显示内容。

我没有保留我访问过的所有不同论坛的完整日志，但这里有几个我最近查看的。

Open a new browser window/iframe and create new document from HTML in TEXTAREA?
Popup preview of textarea input
https://www.codingforums.com/javascript-programming/174810-previewing-textarea-popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Wiki editor
    </title>
  </head>

  <body>
    <h1> Rachel </h1>
    <script>
      var previewOpen;
      function preview() {
        previewOpen = window.open("", "previewOpen", "width=500, height=600");
        previewOpen.document.body.innerHTML = "HTML"; // Get the value of text area and run HTML code
      }
      function closePreview() {
        previewOpen.close();
        // function to close the preview 
      }
    </script>
    <p>Type your HTML code below:</p>
    <textarea rows="20" cols="75">
</textarea>
    <!-- textarea for submittance of code to be read and written -->
    <br>
    <span><input id="preview" type="submit" value="Preview" onClick="preview()">
    <input id="closePreview" type="submit" value="Close Preview" onClick="closePreview()"></span> <!-- buttons with event handlers to read areatext and perform functions-->
  </body>
</html>

Answer 1

最简单的做法是在您的文本区域中添加一个 ID：

<textarea id="myTextArea" rows="20" cols="75">
</textarea> <!-- textarea for submittance of code to be read and written-->

然后在您的 previewOpen 函数中，设置 html:

previewOpen.document.body.innerHTML = document.getElementById("myTextArea").value;

Answer 2

你快接近了。而不是将静态 "HTML" 字符串分配给新打开的 window 正文。赋值 textarea.

var previewOpen;

function preview() {
    const val = document.querySelector('textarea').value;
    previewOpen = window.open("", "previewOpen", "width=500, height=600");
    previewOpen.document.body.innerHTML = val; // Get the value of text area and run HTML code
}

function closePreview() {
    previewOpen.close(); // function to close the preview 
}

Answer 3

下面的代码行正在将静态 "HTML" 字符串值分配给新打开的 windows 正文。

previewOpen.document.body.innerHTML = "HTML"; // Get the value of text area and run HTML code

如果要获取用户输入的值，则必须获取 textarea 的值。

为此你可以这样做。

1.First 添加 id 到您的 textarea.

<textarea id="userValues" rows="20" cols="75">

2.Then 从 function preview().

中获取用户值

 function preview() {
        previewOpen = window.open("", "previewOpen", "width=500, height=600");
        previewOpen.document.body.innerHTML = document.getElementById("userValues").value; // Get the value of text area and run HTML code
      }

It will show like this

干杯！！！

HTML textarea 中的代码，弹出结果预览的按钮

HTML code within textarea, buttons that pop up preview of the result

html

javascript

css

jquery

textarea