דף זה תורגם על ידי Cloud Translation API.

ייבוא HTML

הכללה לאינטרנט

Eric Bidelman

למה כדאי לייבא מוצרים?

כדאי לחשוב על האופן שבו אתם טוענים סוגים שונים של משאבים באינטרנט. עבור JS, יש לנו <script src>. במקרה של שירות CSS, כנראה שהשיטה המומלצת היא <link rel="stylesheet">. כשמדובר בתמונות, זה <img>. בסרטון יש <video>. אודיו, <audio>... יש לך אפשרות לדבר על הנושא! לרוב התוכן באינטרנט יש דרך פשוטה ומוצהרת לטעון את עצמו. לא נכון כשמדובר ב-HTML. אלה האפשרויות שלך:

<iframe> – ניסית ונכון, אבל עם משקל כבד. התוכן של iframe נמצא לחלוטין בהקשר נפרד מזה של הדף שלכם. זאת תכונה נהדרת, אבל היא יוצרת אתגרים נוספים (קשה לכווץ את גודל הפריים לתוכן שלו, מתסכל מאוד ליצור סקריפטים בתוכו או ממנו, כמעט בלתי אפשרי לסגנן).
AJAX – אני אוהב את xhr.responseType="document", אבל אתם אומרים שאני צריך JS כדי לטעון HTML? זה לא נראה נכון.
CrazyHacksTM – מוטמע במחרוזות, מוסתרות כתגובות (לדוגמה, <script type="text/html">). איכס!

רואה את האירוניה? לצורך עבודה עם התוכן הבסיסי ביותר באינטרנט, HTML, נדרש המאמץ הרב ביותר. למרבה המזל, רכיבי האינטרנט נועדו לעזור לנו לחזור למסלול.

איך מתחילים

ייבוא HTML, שהוא חלק מההעברה של רכיבי אינטרנט, הוא דרך לכלול מסמכי HTML במסמכי HTML אחרים. כמו כן, אתם לא מוגבלים לתגי עיצוב. ייבוא יכול גם לכלול CSS, JavaScript או כל דבר אחר שקובץ .html יכול להכיל. במילים אחרות, ייבוא זה הופך לכלי מצוין לטעינת HTML/CSS/JS קשורים.

העקרונות הבסיסיים

כדי לכלול ייבוא בדף, מצהירים על <link rel="import">:

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

כתובת ה-URL של הייבוא נקראת מיקום ייבוא. כדי לטעון תוכן מדומיין אחר, יש להפעיל את מיקום הייבוא ב-CORS:

<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">

זיהוי תכונות ותמיכה בהן

כדי לזהות תמיכה, צריך לבדוק אם .import קיים ברכיב <link>:

function supportsImports() {
    return 'import' in document.createElement('link');
}

if (supportsImports()) {
    // Good to go!
} else {
    // Use other libraries/require systems to load files.
}

התמיכה בדפדפנים עדיין מתבצעת בתחילתה. Chrome 31 היה הדפדפן הראשון שראה הטמעה, אבל ספקי דפדפנים אחרים מחכים לראות את הגרסה של מודולים של ES. עם זאת, בדפדפנים אחרים, webcomponents.js polyfill פועל מעולה עד שיש תמיכה רחבה בדברים.

קיבוץ משאבים

ייבוא הוא מוסכמה לקיבוץ HTML/CSS/JS (גם ייבוא HTML אחר) לתוך פריט תוכן אחד. זוהי תכונה פנימית, אבל בעלת עוצמה רבה. אם אתם יוצרים עיצוב או ספרייה, או רוצים פשוט לפלח את האפליקציה לחלקים לוגיים, עדיף לתת למשתמשים כתובת URL אחת. אפשר אפילו לספק אפליקציה שלמה באמצעות ייבוא. חשבו על זה לרגע.

דוגמה בעולם האמיתי היא Bootstrap. Botstrap מורכב מקבצים בודדים (shoestrap.css, shoestrap.js, גופנים), האפליקציה מחייבת JQuery עבור יישומי הפלאגין, ומספק דוגמאות לתגי עיצוב. מפתחים כמו גמישות בא לה קארט. כך הם יכולים לקנות מתוך החלקים של המסגרת שבהם הם רוצים להשתמש. ולמרות זאת, הייתי מתערב ש-JoeDeveloperTM הטיפוסי שלך ילך בדרך הקלה ויוריד את כל הכלים של Bootstrap.

פעולות ייבוא יכולות להיות הגיוניות מאוד עבור משהו כמו Bootstrap. אני מציג לך את העתיד של טעינת Bootstrap:

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

המשתמשים פשוט טוענים קישור לייבוא HTML. הם לא צריכים להתעסק עם תמונות הפיזור של הקבצים. במקום זאת, כל התוכן של Bootstrap מנוהל וארוז בייבוא, shoestrap.html:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...

<!-- scaffolding markup -->
<template>
    ...
</template>

תנו לזה לשבת. זה מרגש.

אירועי טעינה/שגיאה

הרכיב <link> מפעיל אירוע load כשהייבוא נטען בהצלחה ו-onerror כשהניסיון נכשל (למשל, אם המשאב 404).

כשמתבצע ייבוא מיידי, המערכת מנסה להיטען באופן מיידי. דרך קלה להימנע מכאבי ראש היא להשתמש במאפיינים onload/onerror:

<script>
    function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
    }
    function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
    }
</script>

<link rel="import" href="file.html"
        onload="handleLoad(event)" onerror="handleError(event)">

לחלופין, אם יוצרים את הייבוא באופן דינמי:

var link = document.createElement('link');
link.rel = 'import';
// link.setAttribute('async', ''); // make it async!
link.href = 'file.html';
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

שימוש בתוכן

גם אם מייבאים ייבוא בדף, זה לא אומר "יש למלא כאן את התוכן של הקובץ הזה". זה אומר "מנתח, תצא לדרך אחזור של המסמך הזה כדי שאוכל להשתמש בו". כדי להשתמש בפועל בתוכן, עליכם לנקוט פעולה ולכתוב סקריפט.

רגע קריטי של aha! הוא ההבנה שייבוא הוא רק מסמך. למעשה, התוכן של הייבוא נקרא מסמך ייבוא. יש לך אפשרות לשנות את האופי של ייבוא באמצעות ממשקי API סטנדרטיים של DOM!

link.import

כדי לגשת לתוכן של ייבוא, משתמשים במאפיין .import של רכיב הקישור:

var content = document.querySelector('link[rel="import"]').import;

הערך של link.import הוא null בתנאים הבאים:

הדפדפן לא תומך בייבוא HTML.
ב<link> אין rel="import".
ה-<link> לא נוסף ל-DOM.
הערך <link> הוסר מה-DOM.
המשאב לא תומך ב-CORS.

דוגמה מלאה

נניח שהשדה warnings.html מכיל:

<div class="warning">
    <style>
    h3 {
        color: red !important;
    }
    </style>
    <h3>Warning!
    <p>This page is under construction
</div>

<div class="outdated">
    <h3>Heads up!
    <p>This content may be out of date
</div>

יבואנים יכולים לחלץ חלק ספציפי מהמסמך הזה ולשכפל אותו בדף שלהם:

<head>
    <link rel="import" href="warnings.html">
</head>
<body>
    ...
    <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
    </script>
</body>

כתיבת סקריפטים בייבוא

ייבוא הוא לא במסמך הראשי. הם ממש לוויין. עם זאת, הייבוא עדיין יוכל לפעול בדף הראשי למרות שהמסמך הראשי הוא הגבוה ביותר. לייבוא יש גישה ל-DOM משלו ו/או ל-DOM של הדף שמייבא אותו:

דוגמה - Import.html שמוסיף אחד מגיליונות הסגנונות שלו לדף הראשי

<link rel="stylesheet" href="http://www.example.com/styles.css">
<link rel="stylesheet" href="http://www.example.com/styles2.css">

<style>
/* Note: <style> in an import apply to the main
    document by default. That is, style tags don't need to be
    explicitly added to the main document. */
#somecontainer {
color: blue;
}
</style>
...

<script>
// importDoc references this import's document
var importDoc = document.currentScript.ownerDocument;

// mainDoc references the main document (the page that's importing us)
var mainDoc = document;

// Grab the first stylesheet from this import, clone it,
// and append it to the importing document.
    var styles = importDoc.querySelector('link[rel="stylesheet"]');
    mainDoc.head.appendChild(styles.cloneNode(true));
</script>

כדאי לשים לב למה שקורה כאן. הסקריפט בתוך הייבוא מפנה למסמך המיובא (document.currentScript.ownerDocument), ומוסיף חלק מהמסמך הזה לדף הייבוא (mainDoc.head.appendChild(...)). בצורה תקינה, אם תשאל אותי.

כללים של JavaScript בייבוא:

הסקריפט בייבוא מבוצע בהקשר של החלון שמכיל את document המיובא. אז window.document מתייחס למסמך הראשי בדף. יש לכך שני תוצאות מועילות:
- הפונקציות שהוגדרו בייבוא מסתיימות בסופו של דבר ב-window.
- לא צריך לעשות שום דבר קשה, כמו להוסיף את הבלוקים <script> של הייבוא לדף הראשי. שוב, הסקריפט מופעל.
פעולות ייבוא לא חוסמות את הניתוח של הדף הראשי. עם זאת, הסקריפטים שנכללים בהם מעובדים לפי הסדר. זה אומר שאתם מקבלים התנהגות כמו דחייה, תוך שמירה על סדר תקין של הסקריפטים. מידע נוסף בנושא מופיע בהמשך.

העברת רכיבי אינטרנט

העיצוב של HTML Imports מתאים מאוד לטעינת תוכן לשימוש חוזר באינטרנט. באופן ספציפי, זו דרך אידיאלית להפצת רכיבי אינטרנט. הכול, מרכיבי HTML <template> בסיסיים ועד רכיבים מותאמים אישית מלאים עם צל DOM [1, 2, 3]. כשמשתמשים בטכנולוגיות האלה במקביל, הייבוא הופך ל-#include עבור רכיבי אינטרנט.

כולל תבניות

הרכיב 'תבנית HTML' מתאים באופן טבעי לייבוא HTML. <template> הוא כלי מעולה לפרסום קטעים של תגי עיצוב כדי שאפליקציית הייבוא תשתמש בהם כרצונך. גלישת תוכן ב-<template> גם נותנת לכם יתרון נוסף – התוכן נשאר יציב עד לשימוש. כלומר, סקריפטים לא פועלים עד שהתבנית תתווסף ל-DOM). בום!

import.html

<template>
    <h1>Hello World!</h1>
    <!-- Img is not requested until the <template> goes live. -->
    <img src="world.png">
    <script>alert("Executed when the template is activated.");</script>
</template>

index.html

<head>
    <link rel="import" href="import.html">
</head>
<body>
    <div id="container"></div>
    <script>
    var link = document.querySelector('link[rel="import"]');

    // Clone the <template> in the import.
    var template = link.import.querySelector('template');
    var clone = document.importNode(template.content, true);

    document.querySelector('#container').appendChild(clone);
    </script>
</body>

רישום רכיבים מותאמים אישית

Custom Elements היא טכנולוגיה נוספת של רכיבי אינטרנט שפועלת בצורה מגוחכת עם ייבוא HTML. ייבוא יכול להפעיל סקריפט, אז למה לא להגדיר + לרשום את הרכיבים המותאמים אישית שלך כך שהמשתמשים לא יצטרכו לעשות זאת? קריאה... "רישום אוטומטי".

elements.html

<script>
    // Define and register <say-hi>.
    var proto = Object.create(HTMLElement.prototype);

    proto.createdCallback = function() {
    this.innerHTML = 'Hello, <b>' +
                        (this.getAttribute('name') || '?') + '</b>';
    };

    document.registerElement('say-hi', {prototype: proto});
</script>

<template id="t">
    <style>
    ::content > * {
        color: red;
    }
    </style>
    <span>I'm a shadow-element using Shadow DOM!</span>
    <content></content>
</template>

<script>
    (function() {
    var importDoc = document.currentScript.ownerDocument; // importee

    // Define and register <shadow-element>
    // that uses Shadow DOM and a template.
    var proto2 = Object.create(HTMLElement.prototype);

    proto2.createdCallback = function() {
        // get template in import
        var template = importDoc.querySelector('#t');

        // import template into
        var clone = document.importNode(template.content, true);

        var root = this.createShadowRoot();
        root.appendChild(clone);
    };

    document.registerElement('shadow-element', {prototype: proto2});
    })();
</script>

הייבוא הזה מגדיר (ורושם) שני רכיבים, <say-hi> ו-<shadow-element>. הרכיב הראשון מציג רכיב בסיסי בהתאמה אישית שרושם את עצמו בתוך הייבוא. הדוגמה השנייה מראה איך להטמיע רכיב מותאם אישית שיוצר DOM של צל מ-<template>, ואז רושם את עצמו.

החלק הטוב ביותר ברישום רכיבים מותאמים אישית בייבוא HTML הוא שהיבואן פשוט מצהיר על הרכיב שלכם בדף שלו. אין צורך בחיווט.

index.html

<head>
    <link rel="import" href="elements.html">
</head>
<body>
    <say-hi name="Eric"></say-hi>
    <shadow-element>
    <div>( I'm in the light dom )</div>
    </shadow-element>
</body>

לדעתי, תהליך העבודה הזה לבדו הופך את 'ייבוא HTML' לדרך אידיאלית לשיתוף רכיבי אינטרנט.

ניהול יחסי תלות וייבוא משנה

ייבוא משנה

יכול להיות שימושי כאשר ייבוא אחד כולל ייבוא אחר. לדוגמה, אם רוצים להשתמש שוב ברכיב אחר או להרחיב אותו, אפשר לבצע ייבוא כדי לטעון את הרכיבים האחרים.

לפניכם דוגמה אמיתית מ-Polymer. זה רכיב כרטיסייה חדש (<paper-tabs>) שעושה שימוש חוזר בפריסה וברכיב בורר. יחסי התלות מנוהלים באמצעות HTML Imports.

Paper-tabs.html (מפושט):

<link rel="import" href="iron-selector.html">
<link rel="import" href="classes/iron-flex-layout.html">

<dom-module id="paper-tabs">
    <template>
    <style>...</style>
    <iron-selector class="layout horizonta center">
        <content select="*"></content>
    </iron-selector>
    </template>
    <script>...</script>
</dom-module>

מפתחי אפליקציות יכולים לייבא את הרכיב החדש באמצעות:

<link rel="import" href="paper-tabs.html">
<paper-tabs></paper-tabs>

כשמכשיר <iron-selector2> חדש ומדהים יותר יושק בעתיד, אפשר להחליף את <iron-selector> ולהתחיל להשתמש בו מיד. פעולות ייבוא ורכיבי אינטרנט לא יגרמו לשיבושים במשתמשים.

ניהול תלות

כולנו יודעים שטעינת JQuery יותר מפעם אחת בדף גורמת לשגיאות. זו לא תהיה בעיה עצומה לרכיבי אינטרנט כשכמה רכיבים משתמשים באותה ספרייה? לא אם אנחנו משתמשים בייבוא HTML! אפשר להשתמש בהם כדי לנהל את יחסי התלות.

עטיפת ספריות בייבוא HTML, תגרום לביטול כפילויות של משאבים באופן אוטומטי. המסמך מנותח פעם אחת בלבד. הסקריפטים מבוצעים פעם אחת בלבד. לדוגמה, נניח שאתה מגדיר ייבוא, jquery.html, שטוען עותק של JQuery.

jquery.html

<script src="http://cdn.com/jquery.js"></script>

ניתן לעשות שימוש חוזר בייבוא הזה, באופן הבא:

import2.html

<link rel="import" href="jquery.html">
<div>Hello, I'm import 2</div>

ajax-element.html

<link rel="import" href="jquery.html">
<link rel="import" href="import2.html">

<script>
    var proto = Object.create(HTMLElement.prototype);

    proto.makeRequest = function(url, done) {
    return $.ajax(url).done(function() {
        done();
    });
    };

    document.registerElement('ajax-element', {prototype: proto});
</script>

גם הדף הראשי עצמו יכול לכלול jquery.html אם הוא זקוק לספרייה:

<head>
    <link rel="import" href="jquery.html">
    <link rel="import" href="ajax-element.html">
</head>
<body>

...

<script>
    $(document).ready(function() {
    var el = document.createElement('ajax-element');
    el.makeRequest('http://example.com');
    });
</script>
</body>

למרות ש-jquery.html כלול בעצי ייבוא רבים ושונים, המסמך שלו מאוחזר ומעובד פעם אחת בלבד על ידי הדפדפן. הבדיקה של חלונית הרשת מוכיחה את הדברים הבאים:

שיקולי ביצועים

ייבוא HTML הוא דבר מעולה, אבל כמו בכל טכנולוגיית אינטרנט חדשה, כדאי להשתמש בהם בחוכמה. השיטות המומלצות לפיתוח אתרים נשארות בתוקף. ריכזנו כאן כמה דברים שכדאי לזכור.

שרשור פעולות ייבוא

תמיד חשוב לצמצם את בקשות הרשת. אם יש לכם הרבה קישורים לייבוא ברמה העליונה, כדאי לשלב אותם למשאב אחד ולייבא את הקובץ.

Vulcanize הוא כלי לבניית NPM מצוות Polymer שמשטח באופן רקורסיבי קבוצה של ייבוא HTML לקובץ יחיד. התהליך הזה הוא כמו שלב build לשרשור של רכיבי אינטרנט.

תהליכי הייבוא מתבססים על שמירה במטמון בדפדפן

אנשים רבים שוכחים שמערימת הרשתות של הדפדפן עברה כוונון עדין במשך השנים. גם ייבוא (וייבוא משנה) מנצל את הלוגיקה הזו. הייבוא של http://cdn.com/bootstrap.html עשוי לכלול משאבי משנה, אבל הם יישמרו במטמון.

התוכן שימושי רק כשמוסיפים אותו

אפשר לראות שהתוכן לא יציב עד שאתם מתקשרים לשירותים שלו. השתמש בגיליון סגנונות רגיל שנוצר באופן דינמי:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

הדפדפן לא יבקש את style.css עד ש-link יתווסף ל-DOM:

document.head.appendChild(link); // browser requests styles.css

דוגמה נוספת היא סימון שנוצר באופן דינמי:

var h2 = document.createElement('h2');
h2.textContent = 'Booyah!';

השדה h2 הוא חסר משמעות יחסית עד שמוסיפים אותו ל-DOM.

אותו עיקרון חל על מסמך הייבוא. אם לא תצרפו את התוכן שלו ל-DOM, המערכת לא תפעל. למעשה, הדבר היחיד ש"מבוצע" במסמך הייבוא הוא <script>. למידע נוסף, ראו כתיבת סקריפטים בייבוא.

מתבצעת אופטימיזציה לטעינה אסינכרונית

מייבאת עיבוד בלוקים

מייבא חסימת עיבוד של הדף הראשי. הדבר דומה למה שעושה <link rel="stylesheet">. הסיבה לכך שהדפדפן חוסם רינדור בגיליונות סגנונות מלכתחילה היא כדי למזער את FOUC. אופן הפעולה של ייבוא דומה כי הוא יכול להכיל גיליונות של סטיילוס.

כדי להשתמש באופן אסינכרוני לחלוטין ולא לחסום את המנתח או את העיבוד, צריך להשתמש במאפיין async:

<link rel="import" href="/path/to/import_that_takes_5secs.html" async>

הסיבה לכך ש-async לא מוגדר כברירת המחדל לייבוא HTML, היא שכדי לייבא אותו יש צורך במפתחים לבצע יותר עבודה. המשמעות של סינכרוני כברירת מחדל היא שקובצי HTML מיובאים שיש בהם הגדרות מותאמות אישית של רכיבים ייטענו וישדרגו לפי סדר כברירת מחדל. בעולם אסינכרוני לחלוטין, המפתחים יצטרכו לנהל בעצמם את התזמונים של הריקוד והשדרוג.

אפשר גם ליצור ייבוא אסינכרוני באופן דינמי:

var l = document.createElement('link');
l.rel = 'import';
l.href = 'elements.html';
l.setAttribute('async', '');
l.onload = function(e) { ... };

פעולות הייבוא לא חוסמות ניתוח

ייבוא לא חוסמת את הניתוח של הדף הראשי. הסקריפטים שכלולים בייבוא מעובדים לפי הסדר, אבל לא חוסמים את דף הייבוא. זה אומר שאתם מקבלים התנהגות כמו דחייה, תוך שמירה על סדר תקין של הסקריפטים. אחד היתרונות של ייבוא המרות אל <head> הוא היכולת לאפשר למנתח להתחיל לעבוד על התוכן בהקדם האפשרי. עם זאת, חשוב מאוד לזכור ש-<script> במסמך הראשי עדיין ימשיך לחסום את הדף. <script> הראשון אחרי הייבוא יחסום את עיבוד הדף. הסיבה לכך היא שבייבוא יכול להיות סקריפט, שצריך להפעיל אותו לפני הסקריפט בדף הראשי.

<head>
    <link rel="import" href="/path/to/import_that_takes_5secs.html">
    <script>console.log('I block page rendering');</script>
</head>

יש כמה דרכים לבצע אופטימיזציה של ההתנהגות האסינכרונית, בהתאם למבנה האפליקציה ולתרחיש לדוגמה. השיטות הבאות מצמצמות את החסימה של עיבוד הדף הראשי.

תרחיש מס' 1 (מועדף): אין סקריפט ב-<head> או מוטבע ב-<body>

ההמלצה שלי למיקום <script> היא להימנע ממעקב מיידי אחר פעולות הייבוא. העבר סקריפטים בשלב מאוחר ככל האפשר... אבל כבר מיישמים את השיטה המומלצת הזו, נכון? ;)

לדוגמה:

<head>
    <link rel="import" href="/path/to/import.html">
    <link rel="import" href="/path/to/import2.html">
    <!-- avoid including script -->
</head>
<body>
    <!-- avoid including script -->

    <div id="container"></div>

    <!-- avoid including script -->
    ...

    <script>
    // Other scripts n' stuff.

    // Bring in the import content.
    var link = document.querySelector('link[rel="import"]');
    var post = link.import.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
    </script>
</body>

הכול למטה.

תרחיש 1.5: הייבוא מוסיף את עצמו

אפשרות אחרת היא לבקש מהייבוא להוסיף תוכן משלו. אם מחבר הייבוא קובע חוזה למעקב אחר מפתח האפליקציה, הייבוא יכול להוסיף את עצמו לאזור בדף הראשי:

import.html:

<div id="blog-post">...</div>
<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
</script>

index.html

<head>
    <link rel="import" href="/path/to/import.html">
</head>
<body>
    <!-- no need for script. the import takes care of things -->
</body>

תרחיש מס' 2: יש סקריפט ב-<head> או בתוך <body>

אם יש ייבוא שטעינתו נמשכת זמן רב, ה-<script> הראשון שעוקב אחריו בדף יחסום את עיבוד הדף. לדוגמה, ב-Google Analytics, מומלץ להוסיף את קוד המעקב בתוך <head>. אם לא ניתן להימנע מהוספת <script> בתוך <head>, הוספה דינמית של הייבוא תמנע את חסימת הדף:

<head>
    <script>
    function addImportLink(url) {
        var link = document.createElement('link');
        link.rel = 'import';
        link.href = url;
        link.onload = function(e) {
        var post = this.import.querySelector('#blog-post');

        var container = document.querySelector('#container');
        container.appendChild(post.cloneNode(true));
        };
        document.head.appendChild(link);
    }

    addImportLink('/path/to/import.html'); // Import is added early :)
    </script>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...
</body>

לחלופין, מוסיפים את הייבוא לקראת סוף ה-<body>:

<head>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...

    <script>
    function addImportLink(url) { ... }

    addImportLink('/path/to/import.html'); // Import is added very late :(
    </script>
</body>

דברים שכדאי לזכור

ה-mimetype של הייבוא הוא text/html.
יש להפעיל ב-CORS משאבים ממקורות אחרים.
ייבוא מאותה כתובת URL מאוחזר ומנותח פעם אחת. המשמעות היא שסקריפט בייבוא מופעל רק בפעם הראשונה שהייבוא מופיע.
הסקריפטים בייבוא מעובדים לפי הסדר, אבל הם לא חוסמים את ניתוח המסמך העיקרי.
המשמעות של קישור לייבוא היא לא ' #include the content here'. זה אומר "מנתח, תצא לדרך אחזור של המסמך הזה כדי שאוכל להשתמש בו מאוחר יותר". בעוד שהסקריפטים פועלים בזמן הייבוא, יש להוסיף באופן מפורש גיליונות סגנונות, תגי עיצוב ומשאבים אחרים לדף הראשי. לתשומת ליבך, אין צורך להוסיף את <style> באופן מפורש. זהו הבדל משמעותי בין יבוא HTML ל-<iframe>, שבו כתוב "טען ועבד את התוכן הזה כאן".

סיכום

ייבוא HTML מאפשר לקבץ יחד HTML/CSS/JS כמשאב יחיד. למרות שהוא שימושי כשלעצמם, הרעיון הזה הופך לחזק ביותר בעולם של רכיבי האינטרנט. המפתחים יכולים ליצור רכיבים לשימוש חוזר כדי שאחרים יוכלו לצרוך אותם ולהשתמש בהם באפליקציה שלהם, והכל דרך <link rel="import">.

ייבוא HTML הוא רעיון פשוט, אבל הוא מאפשר מספר תרחישים מעניינים לשימוש בפלטפורמה.

תרחישים לדוגמה

להפיץ HTML/CSS/JS רלוונטיים כחבילה אחת. תיאורטית, אפשר לייבא אפליקציית אינטרנט שלמה לאפליקציה אחרת.
ארגון הקוד – חלוקת מושגים באופן לוגי לקבצים שונים, מעודדת מודולריות ושימוש חוזר**.
מעבירים הגדרה אחת או יותר של רכיב מותאם אישית. ניתן להשתמש בייבוא כדי register ולכלול אותם באפליקציה. כך ניתן להשתמש בדפוסי תוכנה טובים, תוך הפרדה בין הממשק או ההגדרה של הרכיב לאופן השימוש בו.
ניהול יחסי תלות – מחיקת כפילויות של משאבים באופן אוטומטי.
סקריפט Chunk – לפני הייבוא, הקובץ של ספריית JS גדולה צריך לנתח את הקובץ במלואו כדי להתחיל לפעול. הפעולה הייתה איטית. כשמבצעים ייבוא, הספרייה יכולה להתחיל לפעול ברגע שנתח A מנותח. קיצור זמן האחזור!

// TODO: DevSite - Code sample removed as it used inline event handlers

מקביל לניתוח HTML - הפעם הראשונה שהדפדפן יכול להפעיל שני מנתחי HTML (או יותר) במקביל.
מאפשר מעבר בין מצבי ניפוי באגים למצבי ניפוי באגים באפליקציה, רק על ידי שינוי יעד הייבוא עצמו. האפליקציה שלך לא צריכה לדעת אם יעד הייבוא הוא משאב מקובץ או הידור, או עץ ייבוא.