HTML link with rel="import"

The link[rel="import"] can be used to load one HTML file into another.

<link href="extern.html" rel="import">

Should the file to be imported contain further „style“ or „script“ elements, these will be imported as well. When the imported document contains stylesheets, these will be directly apllied to the importing document.
Other content from the imported document will be loaded, but not displayed. All the texts, images and other media will not be visible as they are not part of the DOM tree of the parent document. Fortunitely, these contents are accessible via JavaScript such as var extern = document.getElementsByTagName("link")[0].import; var externBody = extern.getElementsByTagName("body")[0]
Browser support can be checked with if ("import" in document.createElement("link")) {}

Usage Cases

References


* cached version, generated at 2020-05-05 17:00:44 UTC.

Subscribe by RSS