如何在 HTML 页面上实时预览 HTML

Question

我正在尝试构建一个工具，允许您使用 Blockly-Blocks (Blockly) 创建 HTML 页面。这是一个 HTML 页面，目前看起来像这样：

它已经可以从块中创建代码，但现在我需要一种方法来在右上角的页面上实时预览结果。有谁知道如何可以轻松实现这一点？我环顾四周，但只找到了能够实时预览 HTML 的工具，但没有一个可以在您自己的页面中使用。

提前致谢！

Answer 1

您可以将页面记录并写入 iFrame 中

这在 SO 不起作用，因为 iFrame 是沙盒的

但它确实可以在 jsfiddle

中使用

PS：您的 HTML 格式错误。

const ifr = document.preview;
const html = `<!doctype html>
    <head>
      <meta charset="UTF-8" />
      <title>Preview</title>
    </head>
    <body>
    <div style="font-family:Ariel, sans-serif; background-color: #ffcc00; color: #003300">
      <ol>
        <li>Line 1</li>
        <li>Line 2</li>
      </ol>
    </div>  
    </body>
    </html>`;
ifr.document.write(html);
ifr.document.close();

#preview {
  width: 500px;
  height: 500px;
  float: right;
}

<iframe name="preview" id="preview"></iframe>

Answer 2

您可以将代码保存在文件中，例如：“index.html”

从右下角复制代码

<DOCTYPE HTML>

到最后

</html>

然后用浏览器打开文件，就这么简单:)

Answer 3

您可以使用Phoenix代码编辑器在浏览器中查看它https://phcode.dev/ 或从 https://phcode.io

下载编辑器的副本

如何在 HTML 页面上实时预览 HTML

问题描述投票：0回答：3

3个回答

最新问题

如何在 HTML 页面上实时预览 HTML

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3