عنصر “link” یک نعمت است. این امکان جاسازی آسان شیوه نامه ها و جاوا اسکریپت های مورد نیاز در چندین سند را فراهم می کند. با این حال، اجازه جاسازی فایل‌های HTML را نمی‌داد. برای رسیدن به این هدف، ما به عنصر “iframes” یا روش جاوا اسکریپت “XMLHttpRequest()” محدود شدیم. به لطف واردات جدید HTML5، اکنون می توانیم از عنصر “” برای بارگذاری یک فایل HTML در دیگری استفاده کنیم.

نشانه گذاری ساده در هدر

جاسازی یک فایل HTML ساده است. تنها کاری که باید انجام دهیم این است که از عنصر مشترک “<link>” استفاده کنیم. سپس مقدار “import” را به ویژگی “rel” اضافه می کنیم. با استفاده از “href” ما URL فایل HTML را ضمیمه می کنیم، درست همانطور که در مورد شیوه نامه ها و اسکریپت ها به آن عادت کرده ایم.

<link href=”extern.html” rel=”import” />
اگر فایلی که قرار است وارد شود حاوی عناصر «سبک» یا «اسکریپت» بیشتری باشد، این عناصر نیز وارد خواهند شد. مهم نیست که این عناصر در سر یا بدنه سند مشخص شده باشند. یکی از موارد استفاده برای واردات HTML5 می تواند جمع آوری تمام شیوه نامه ها و اسکریپت های مورد نیاز در یک پروژه معین و افزودن به یک فایل HTML واحد باشد که سپس به تمام فایل های پروژه دیگر وارد می شود. این امر تا حد زیادی تعمیر و نگهداری پروژه های بزرگتر را ساده می کند.

در حالی که سند وارد شده حاوی شیوه نامه است، این صفحات مستقیما اعمال می شوند. شیوه نامه های تعریف شده قبلی از سند والد بازنویسی می شود. برای اطمینان از اینکه این اتفاق نمی افتد، از موقعیت پیوند واردات در سند والد مراقبت کنید. همین امر در مورد جاوا اسکریپت نیز صادق است. حتی عناصر ارجاع شده خارجی از سند وارد شده در سند والد بارگیری می شوند.

دسترسی به محتویات فایل وارداتی

محتوای دیگر از سند وارد شده بارگیری می شود، اما نمایش داده نمی شود. همه متون، تصاویر و سایر رسانه ها قابل مشاهده نخواهند بود زیرا بخشی از درخت DOM سند والد نیستند. اگرچه هنوز هم می توانید از طریق جاوا اسکریپت به آنها دسترسی داشته باشید.

var extern = document.getElementsByTagName(“پیوند”)[0].import;
مثال ما فرض می کند که اولین عنصر “پیوند” یک فایل HTML را بارگذاری می کند. با استفاده از ویژگی “import” جاوا اسکریپت، ساختار درختی کامل فایل وارد شده را روی یک متغیر می نویسیم. از آنجا می توانیم از طریق جاوا اسکریپت به گره های جداگانه دسترسی پیدا کنیم.

var absatz = extern.getElementsByTagName(“p”)[0];
از اینجا می‌توانیم با استفاده از روش‌های رایج جاوا اسکریپت مانند «getElementsByTagName()» به همه گره‌ها دسترسی داشته باشیم و آن‌ها را بخوانیم. اکنون می توانیم آنها را به راحتی به درخت DOM سند والد اضافه کنیم. در یک رویکرد رادیکال‌تر، می‌توانیم عنصر “body” را به طور کامل با محتوای فایل وارد شده جایگزین کنیم.

window.addEventListener(“load”, function() {
document.getElementsByTagName(“html”)[0].replaceChild(extern.getElementsByTagName(“body”)[0], document.getElementsByTagName(“body”)[0]);
}، نادرست)؛
مثال ما محتوای عنصر “body” را با استفاده از “replaceChild()” جایگزین می کند. برای اطمینان از اینکه جایگزینی قبل از بارگیری همه عناصر شروع نمی‌شود، تابع به شنونده رویداد اضافه شده از طریق «addEventListener()» متصل می‌شود.

پشتیبانی مرورگر

در زمان نگارش این مقاله، فقط Chrome از واردات HTML5 پشتیبانی می کند. همچنین باید عملکرد را به صورت دستی فعال کنید. با «chrome://flags» از نوار آدرس تماس بگیرید، که به شما امکان دسترسی به ویژگی‌های آزمایشی را می‌دهد. به دنبال “فعال کردن HTML Imports” باشید و – خوب – آن را فعال کنید. پس از شروع جدید Chrome HTML5 Imports در دسترس خواهد بود.

از تابع زیر برای بررسی اینکه آیا یک مرورگر معین از واردات HTML5 پشتیبانی می کند یا خیر استفاده کنید.

if ("import" in document.createElement("link")) {
  // HTML5 Imports are supported.
}

مرورگرهای قدیمی‌تر می‌توانند از یک polyfill استفاده کنند که واردات HTML5 را در مرورگرهای پشتیبانی‌نشده شبیه‌سازی می‌کند. به این ترتیب دیگر نیازی به وارد کردن HTML5 در پروژه های وب مدرن نیست.