Include HTML into other HTML with web components

Question

What is the right way to insert HTML snippet into main HTML file with HTML5 imports?

The answer to more generic question https://stackoverflow.com/a/22142111/239247 mentions that it is possible to do:

<head>
  <link rel="import" href="header.html">
</head>

But this doesn't work. I don't need to insert JS and CSS. Only plain HTML markup inserted at the top of <body>. What is the most simple way to do this and keep HTML readable?

Did you look at http://www.w3schools.com/tags/tag_iframe.asp — Garry, Jul 10 '15 at 19:31
That's experimental. You may have to resort to something like http://api.jquery.com/load/ — Yuriy Galanter, Jul 10 '15 at 19:32

Snappawapa · Answer 1 · 2015-08-03T14:03:52.810

0

See: http://www.w3schools.com/angular/angular_includes.asp

It says:

HTML Includes in Future HTML. Including a portion of HTML in HTML is, unfortunately, not (yet) supported by HTML.

So this is on its way, but not here yet.

EDIT: If you are able to, I would use PHP, which is close to the level of cleanliness. The link I inclueded shows multiple ways to do what you are trying to do.

Late edit: if it still counts (for those worried about sourcing): http://caniuse.com/#feat=imports

edited Aug 03 '15 at 14:03

answered Jul 10 '15 at 19:30

Snappawapa

1,697
3
20
42

@techtonik It's always been a great resource for me. Just saying. I don't see peoples' problem with it. – Snappawapa Jul 11 '15 at 22:41
Again, always has been for me. I trust them. – Snappawapa Jul 11 '15 at 23:15
There is no data when this information was updated, so I have no reason to trust them. – anatoly techtonik Jul 12 '15 at 10:53

score 0 · Answer 2 · answered Jul 10 '15 at 20:04

The way I have found to do this is to use ASP.NET and .cshtml files and use razor, as seen here: http://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts Beyond simply inserting html into other html this also allows you to have consistent navigation bars, footers, etc. and minimizes your code profile. Also, the use of a layout file gives the site a better feel as only a section of the site refreshes when you click an internal link, as opposed to the whole site.

ASP.NET is not HTML5 web components standard. – anatoly techtonik Jul 11 '15 at 22:47 — anatoly techtonik, Jul 11 '15 at 22:47

anatoly techtonik · Answer 3 · 2015-07-14T08:27:33.797

Found a way to do this from html5rocks, but it is far from being readable. This is the ideal way:

<body>
  <include src="header.html"/>
</body>

And this is how it is implemented by HTML5 imports:

<head>
  <link rel="import" href="header.html">
</head>
<body>
  ...
  <script>
    document.body.appendChild(
      document.querySelector('link[rel="import"]')
        .import
        .querySelector('body')
        .cloneNode(true));
  </script>
</body>

Notes:

not clear how to choose include if both header.html and footer.html are there
querySelector('body') is required to avoid Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type '#document' may not be inserted inside nodes of type 'BODY'.
not clear how to insert <body> tag contents without the tag itself
HTML5 import doesn't work in Firefox (38) http://caniuse.com/#feat=imports =/

Include HTML into other HTML with web components

3 Answers3