4

I want to store an entire HTML document to put in an iframe (srcdoc) later.

Am I allowed to put everything in a template including the html, head and body like this?

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

If not, what's the best way to store an entire document? Thanks!

J. Doe
  • 97
  • 8

1 Answers1

4

Unfortunately, the template tag is not allowed to contain <html> tags. per 4.1.1 of the HTML specification:

Contexts in which [the <html>] element can be used:

  • As document's document element.
  • Wherever a subdocument fragment is allowed in a compound document.

and from 4.12.3, the <template> tag does not provide either of these contexts. For the same reason, you can't use <head>, <body> or <title> tags either. Chrome and Firefox both actively strip out the invalid tags from the <template>, preventing you from using it.

The best way of storing HTML for use in iframes is to put the HTML code in a different file in your web server.

However, an acceptable alternative is to store the HTML inside your <iframe>, then populating the srcdoc attribute with the content.

<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>
Community
  • 1
  • 1
oshah81
  • 93
  • 4
  • That's a great idea, thanks. I assume a compound document is only for including things like SVG? – J. Doe Jun 21 '19 at 02:01
  • Also I tried putting another iframe inside the html but the end tags got confused. Should I escape it like **</iframe>**? – J. Doe Jun 21 '19 at 04:37
  • 1
    Yes, an inline SVG is a good example of a compound document. Other examples are ` – oshah81 Jun 21 '19 at 10:05
  • 1
    Yes, this is a downside of trying to inline your iframes this way. If you escape your iframe tags with < you'll have to find a way to unescape it before you insert it into the page. You'll also have to be careful not to unescape any other unrelated <s (which were encoded for a different reason). – oshah81 Jun 21 '19 at 10:28
  • Now that you mentioned it, couldn't we just have a `` element and then put the entire HTML document in a ``? – J. Doe Jun 21 '19 at 14:53
  • Never mind that doesn't work, however you can use a `` element with a CDATA section. – J. Doe Jun 21 '19 at 15:30
  • 1
    Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195359/discussion-between-oshah81-and-j-doe). – oshah81 Jun 21 '19 at 15:41
  • Very helpful, thanks! If you need 2 instances of the same remote widget on your page, is `iframe` the way to go about it? – Jay Mar 14 '22 at 11:53