预览由 textarea 输入的完整 HTML 页面答案

【问题标题】：Previewing a full HTML page inputted by a textarea预览由 textarea 输入的完整 HTML 页面
【发布时间】：2021-06-03 04:02:32
【问题描述】：

我正在创建一个模板应用程序，用户可以在其中在 textarea 中编写任何 HTML/CSS 代码（例如，粘贴在 textarea 上的完整 html 页面）。这些用户大多熟悉 html 和 css，所以我们还没有实现 markdown。我们想要添加的一项重要功能是能够在提交之前在 textarea 中预览 html。我已经想到了可以做到这些的方法，但我不确定哪种方法是正确的和最可维护的。

在同一页面的 div 中预览 html - 我在这里看到的问题是现有的 CSS 样式可能会干扰用户在 textarea 中键入的 CSS 样式。此外，如果用户在textarea中写入body标签，实际页面的现有body标签内还会有另一个body标签，因此html可能会出现格式错误。
在单独的窗口中预览 html - 问题是我对此没有太多控制权（例如，如果用户使用弹出窗口阻止程序）
在单独的选项卡上预览 html - 问题是用户可能会感到困惑（例如，关闭整个浏览器，以为它会在新窗口中打开）
在 iframe 上预览 html - 这是可行的，但需要我创建一个额外的 .html 文件来进行预览
在模态框上预览 html - 这是可行的，但我不确定模态框是否会接受标题或正文等顶级标签

谁能帮帮我？这些潜在的解决方案中哪一个是最好的？还是有更好的解决方案？

【问题讨论】：

我会推荐使用 ui-dialog.css。使用 Bootstrap 的模态对话框也是一种选择。这样的对话框弹出是用户友好的，用户不会失去对流程的跟踪，并且焦点保持在同一个窗口中。所有标签都可以在 ui-dialog 以及模态弹出窗口中使用。我曾经尝试过 modal，目前正在使用 ui-dialog。

标签： html css browser preview

【解决方案1】：

我会使用 iframe。它可以在其中运行一个新的 body 和 html。因此，例如，如果有人在其中设置了正文的样式，则不会影响其所在的页面。在这里，我为您编写了代码。试一试，在文本区域做一些html编码，然后点击“运行”

<p>type some HTML/CSS code in here:</p>
<textarea type="text" rows="15" cols="40"id="myText"></textarea>

<p>Your HTML output</p>
<iframe id="output" srcdoc="">
</iframe>

<p>Click the button to preview your code</p>

<button onclick="myFunction()">run</button>

<script>
function myFunction() {
  var x = document.getElementById("myText").value;
  document.getElementById("output").srcdoc  = "<!doctype html> <html>" + x + "</html>";
}
</script>

【讨论】：

【解决方案2】：

你研究过 iframe 的 srcdoc 属性吗？它允许您拥有一个完整文档的字符串，而无需创建单独的文件。当然，你必须做一些转义或处理引号的事情。

这是一个简单的例子：

<iframe srcdoc="
<!doctype html>
<html>
<head>
</head>
<body>
  hello
</body>
</html>">
</iframe>

【讨论】：

【解决方案3】：

看看https://codemirror.net/

它是开源的，会给你一个完整的代码编辑器。

如果没有：

如果你想在文本区域中显示 HTML 标记，你应该转义所有带有 < 的“”字符。

【讨论】：