预览由文本区域输入的完整 HTML 页面

Question

我正在创建一个模板应用程序，用户可以在其中编写任何 HTML/CSS 文本区域中的代码（例如粘贴在文本区域上的完整 html 页面）。这些用户大多熟悉 html 和 css，因此我们尚未实施降价。我们要添加的一项重要功能是能够在提交前预览文本区域中的 html。我已经想到了这些可以完成的方法，但我不确定哪种方法是正确的和最可维护的。

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

谁能帮帮我？这些潜在的解决方案中哪些是最好的？或者有更好的解决方案吗？

Answer 1

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

这是一个简单的例子：

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

Answer 2

我会使用 iframe。它可以运行一个新的 body 和 html 里面。因此，如果有人在其中设置了 body 的样式，则不会影响其所在的页面。在这里，我为您编写了代码。试一试，在文本区域做一些 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>

Answer 3

看看https://codemirror.net/

它是开源的，将为您提供开箱即用的完整代码编辑器。

如果没有：

If you want to show HTML markup in a textarea, you should escape all ‘<’ characters with <. For consistency’s sake, you may also escape ‘>’ characters with >.

预览由文本区域输入的完整 HTML 页面

Previewing a full HTML page inputted by a textarea

html

css

browser

preview