Question

我想存储整个HTML文档，以便稍后放入iframe（srcdoc）。

我可以将所有内容放在这样的模板中，包括html，头部和正文吗？

<template>
  <html>
    <head>
      <title>Document</title>
    </head>
    <body>
      <main>Content</main>
    </body>
  </html>
</template>

如果没有，什么是存储整个文档的最佳方法？谢谢！

Answer 1

很遗憾，模板标签不允许包含<html>标签。根据HTML规范的4.1.1：

可以使用[<html>]元素的上下文：


作为文档的文档元素。

复合文档中允许子文档片段存在的任何地方。

并且从4.12.3开始，<template>标记不提供这两个上下文。出于相同的原因，您也不能使用<head>，<body>或<title>标签。 Chrome和Firefox都主动从<template>剥离无效标签，从而阻止您使用它。

存储供iframe使用的HTML的最好方法是将HTML代码放入Web服务器中的其他文件中。

但是，一种可接受的替代方法是将HTML存储在<iframe>内，然后用内容填充srcdoc属性。

<iframe id="yourIframe">
  <!-- Everything inside here is interpreted as text, meaning you can even put doctypes  here. This is legal, per 12.2.6.4.7 and 4.8.5 of the HTML specification. -->
  <!doctype html>
  <html>
    <head>
      <title>Document</title>
    </head>
    <body>
      <main>Content</main>
    </body>
  </html>
</iframe>

...

<script>
...
        const iframe = document.getElementById("yourIframe");
        iframe.srcdoc = iframe.innerHTML;
</script>

我可以将整个HTML文档放在模板中吗？

1 个答案: