HTML Imports
La nouvelle spécification HTML Imports explique comment insérer un document dans un autre à l'aide de la balise HTML <link rel = "import">.
Vous pouvez insérer un document dans un document à l'aide de <iframe>. Pourquoi ai-je besoin d'une autre importation et qu'est-ce qui ne va pas avec <iframe>?
Avec <iframe> tout est tellement. Cependant, dans son contenu, <iframe> est un document séparé. Pour <iframe>, vous créez tout votre environnement, celui-ci possède son propre objet window et ses variables. Si <iframe> est chargé à partir d'un autre domaine, l'interaction avec lui n'est possible que via postMessage.
Cette option est utile lorsque vous souhaitez afficher le contenu d'un autre sur une page. Si vous avez besoin d'incorporer un autre document avec un seul espace de script, des styles uniques faisant naturellement partie du document actuel, il est préférable d'utiliser <link rel = "import">.
<link rel = "import"> est un analogue de <script>, mais permet de connecter des documents complets, avec des modèles, des bibliothèques, des composants Web, etc.
La syntaxe
<link rel="import" href="http://site.com/document.html">
Contrairement à <iframe>, la balise <link rel = "import"> peut figurer n'importe où dans le document, même dans <head>. Lors de l'insertion via <iframe>, un document est affiché à l'intérieur du cadre. Dans le cas de <link rel = "import"> ce n'est pas, par défaut, le document n'est pas affiché du tout.
Le code HTML téléchargé via <link rel = "import"> possède un document DOM séparé, mais les scripts qu’il contient sont exécutés dans le contexte général de la page. Le fichier est traité, les scripts exécutés, un DOM est en cours de construction, mais ne s'affiche pas, mais est écrit dans la propriété link.import.
Vous décidez où et quand l'insérer. Dans l'exemple ci-dessous, <link rel = "import" href = "timer.html"> connecte le document timer.html et, une fois chargé, appelle la fonction show. Cette fonction, via link.import.querySelector ('time'), sélectionne la partie requise dans le document téléchargé et l'insère dans la partie actuelle:
<!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>
Le fichier timer.html contient un élément et un script qui l'anime:
<!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>
Points importants
Une fois téléchargés, tous les scripts du timer.html connecté s’exécutent dans le contexte de la page principale, de sorte que le timer et les autres variables deviennent des pages de variables globales.
Un document déplaçable est un document de la page principale. Pour accéder au document importé, c’est-à-dire au document actuel dans le fichier timer.html, vous pouvez le télécharger en tant que document.currentScript.ownerDocument.
Dans l'exemple ci-dessus, le contenu de l'importation guidait le document maître, mais timer.html pouvait lui-même afficher l'appel document.body.appendChild (timer) ou appeler la fonction à partir d'un document externe, car ils ne possèdent qu'un seul champ de vision. Il ne serait alors pas nécessaire d’avoir de surcharge, notez que les styles d’importation entrent dans le contexte de la page.
Dans l'exemple ci-dessus, l'importation a ajouté un style pour #timer et l'élément lui-même.
Composants Web
L'importation est conçue dans le cadre de la plate-forme Web Components. Il est supposé que le document maître peut importer des fichiers de définitions contenant tous les éléments HTML, JS et CSS nécessaires aux éléments, puis les utiliser. Exemple:
<link rel = "import" href = "ui-tabs.html">
<link rel = "import" href = "ui-dialog.html">
<ui-tabs> ... </ ui-tabs>
<ui-dialog> ... </ ui-dialog>
Réutilisation
La réimportation de la même URL utilise un document déjà existant. Si le fichier libs.html est importé deux fois, CSS et ses scripts sont connectés et exécutés une seule fois, ce qui vous évite de devoir charger plusieurs fois les mêmes dépendances.
La page elle-même et ses volumes d'importation, leur sous-importation, etc., peuvent se connecter à libs.html sans craindre de recharger et d'exécuter à nouveau des scripts.
Par exemple:
Le fichier principal index.html relie les documents:
<link rel = "import" href = "ui-tabs.html">
<link rel = "import" href = "ui-dialog.html">
ui-tabs.html connecte libs.html:
<link rel = "import" href = "libs.html">
... modèle et code pour les onglets ...
ui-dialog.html utilise également libs.html:
<link rel = "import" href = "libs.html">
...modèle et code pour les dialogues ...
Le fichier libs.html ne sera connecté qu'une seule fois. Cela vous permet de ne pas avoir peur de la duplication inutile des bibliothèques utilisées lors de la description de l'ensemble des composants.
Conclusions
La balise <link rel = "import"> vous permet de joindre tout document à une page.
L'espace de script et le style de page seront génériques.
Le document DOM est un document séparé, disponible sous forme de fichier link.import depuis l'extérieur et depuis le script interne, via document.currentScript.ownerDocument.
Vous pouvez facilement transférer des éléments du document principal vers l'importation et inversement.
Les volumes d'importation peuvent contenir d'autres volumes d'importation.
Si une URL est à nouveau importée, un document prêt à l'emploi est connecté, sans ré-exécution de scripts. Cela évite les doublons lorsque vous utilisez une bibliothèque à plusieurs endroits.
