HTML Imports
The new HTML Imports specification describes how to insert one document into another using the <link rel = "import"> HTML tag.
You can now insert a document into a document using <iframe>. Why do I need some more import and what is wrong with <iframe>?
From <iframe> everything is so. However, in its content <iframe> is a separate document. For <iframe> you create your entire environment, it has its own window object and its variables. If <iframe> is loaded from another domain, then interaction with it is possible only through postMessage.
This option is convenient only when it is necessary to display the contents of another on one page. In case you need to embed another document with a single script space, unique styles as a natural part of the current one, it's best to use <link rel = "import">.
<link rel = "import"> is an analogue of <script>, but for connecting complete documents with templates, libraries, web components, etc.
Syntax
<link rel="import" href="http://site.com/document.html">
Unlike <iframe>, the <link rel = "import"> tag can be anywhere in the document, even in <head>. When inserting through <iframe> a document is displayed inside the frame. In the case of <link rel = "import"> it is not, by default, the document is not shown at all.
The HTML downloaded via <link rel = "import"> has a separate DOM document, but scripts in it are executed in the general context of the page. The file is processed, scripts executed, a DOM is being built, but not shown, but is written to the link.import property.
You decide where and when to insert it. In the example below, <link rel = "import" href = "timer.html"> connects the timer.html document and, after it loads, calls the show function. This function, via link.import.querySelector ('time'), selects the required part from the uploaded document and inserts it into the current one:
<!DOCTYPE HTML>
<html>
<body>
<script>
function show() {
var time = link.import.querySelector('time')
document.body.appendChild(time);
};
</script>
<link rel="import" id="link" onload="show()" href="timer.html"></body>
</html>
The timer.html file contains an element and a script that animates it:
<!DOCTYPE HTML>
<html>
<body>
<time id="timer">0</time>
<script>
var localDocument = document.currentScript.ownerDocument;
var timer = localDocument.getElementById('timer');
var timerId = setInterval(function() {
timer.innerHTML++;
}, 1000);
</script>
</body>
</html>
Important points
Once downloaded, all scripts in the connected timer.html run in the context of the main page, so that the timer and other variables become global variable pages.
A movable document is a document of the main page. To access the imported, that is, the current document inside the timer.html it can be downloaded as document.currentScript.ownerDocument.
The timer in the loaded document begins to work immediately, the new document comes to life immediately after loading, although it may not be visible before the nodes are transferred to the main document.
In the example above, the content of the import guided the master document, but timer.html could show itself the call document.body.appendChild (timer) or call the function from an external document, since they have a single field of view. Then it would not be necessary to have any onload.
Note that import styles fall into the context of a page. In the example above, the import has added a style for #timer and the element itself.
Web components
Import is conceived as part of the Web Components platform. It is assumed that the master document can import definitions files that will have all the necessary HTML, JS and CSS for the elements, and then use them. Example:
<link rel = "import" href = "ui-tabs.html">
<link rel = "import" href = "ui-dialog.html">
<ui-tabs> ... </ ui-tabs>
<ui-dialog> ... </ ui-dialog>
Reuse
Re-importing the same URL uses an already existing document. If the libs.html file is imported twice, then CSS and its scripts are connected and executed exactly once.
You can use this to avoid having to load the same dependencies many times. The page itself and its import volumes, their sub-import, and so on, can connect libs.html without fear once again reload and execute scripts. For example:
Main file index.html connects documents:
<link rel = "import" href = "ui-tabs.html">
<link rel = "import" href = "ui-dialog.html">
ui-tabs.html connects libs.html:
<link rel = "import" href = "libs.html">
... template and code for tabs ...
ui-dialog.html also uses libs.html:
<link rel = "import" href = "libs.html">
... template and code for dialogs ...
The libs.html file will only be connected once. This allows you to not be afraid of unnecessary duplication of libraries used when describing the set of components.
Conclusions
The <link rel = "import"> tag allows you to attach any document to a page. The script space and page style will be generic.
The DOM document is a separate, available as link.import from the outside and from the internal script - through document.currentScript.ownerDocument. You can easily transfer elements from the main document to the import and vice versa.
Import volumes may contain other volumes of imports.
If any URL is imported again - a ready-made document is connected, without re-executing scripts in it. This avoids duplication when using one library in many places.
