سه روش برای ساخت اسناد HTML در زمان اجرا

مطمئنا شما همین حالا هم می‎دانید که چگونه با استفاده از جاوا اسکریپت HTML را به یک صفحه اضافه کنید، اما برای ساخت کل یک سند HTML چطور؟ در ادامه با روش‎هایی آشنا خواهید شد که حتی بدون نیاز به جاوا اسکریپت هم بتوانيد این کار را انجام دهید.

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

1. Data URLs

Data URLs یک روش ساده و موثر را در اختیار شما می‎گذارد تا اسناد را در یک صفحه وب وارد کنید. اساسا Data URLs با ساختار data: URL scheme آغاز می‎شود. در ادامه نیز محتوای قابل ارائه قرار می‎گیرد.

شما احتمالا با تصاویری كه از این طریق ارائه شده‎اند برخورد داشته‎اید، جایی که کاراکترهای base64 به عنوان محتوای data URL بعد از نوع مدیا آورده شده است.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAC/VBMVEUAAADphwDqhwDqiAD7kADqiAABi8 =="

alt="man with a computer">

کد بالا یک تصویر PNG از اموجی مردی با لپتاپ را نمایش می‎دهد.

شبیه به همین روش، data URLs می‎تواند اسناد HTML را هم ارائه کند:

<iframe src='data:text/html,<strong>Hello World!</strong>'></iframe>

iframe  سند HTML که با استفاده از data URL اضافه شده است را رندر می‎کند.

2. DOMImplementation

DOMImplementation یک رابط است که می‎تواند اسناد جدید را با استفاده از متدهای createDocument() برای XML یا createHTMLDocument() ایجاد کند. این رابط با استفاده از آبجکت document.implementation قابل دسترسی است.

متد createHTMLDocument() یک پارامتر اختیاری را قبول می‎کند که عنوان سند جدید شما است.

شما می‎توانید HTML را به همان شیوه معمول به سند تازه ساخته شده اضافه کنید.

این کار با استفاده از متدهایی مثل append(), appendChild() یا سایر متدهای مرتبط با DOM جاوا اسکریپت انجام می‎شود.

<iframe src=""></iframe>

window.onload = () => {

  var doc = document.implementation.createHTMLDocument();

  doc.body.append('Hello World!');

  var iframeDoc = document.querySelector('iframe').contentDocument;

  iframeDoc.replaceChild(

  doc.documentElement,

  iframeDoc.documentElement

  );

}

در کد بالا یک سند HTML با استفاده از متد createHTMLDocument() ساخته شده است و عبارت Hello World! نیز به عنصر body اضافه شده است.

برای این که بتوانید ببینید سند تازه ساخته شده بعد از رندر شدن به چه شکلی است ما با استفاده از متد replaceChild() عنصر document   (doc.documentElement) را با عنصر iframe (iframeDoc.documentElement) جایگزین کردیم.

3. DOMParser API

همان‎گونه که از نام آن مشخص است DOMParser API کدهای HTML/XML را به اسناد DOM تبدیل می‎کند.

یک نمونه از آبجکت DOMParser را می‎توان با سازنده آن DOMParser() ایجاد کرد. این نمونه متدی به نام parseFromString() را نگهداری می‎کند که بعد از دریافت دو پارامتر پردازش می‎شود: رشته‎ای که باید تفسیر شود و نوع سندی که باید ساخته شود.

<iframe src=""></iframe>

window.onload = () => {

  var parser = new DOMParser();

  var doc = parser.parseFromString('<strong>Hello World! </strong>', "text/html");

  doc.body.append('extra text');

  var iframeDoc = document.querySelector('iframe').contentDocument;

  iframeDoc.replaceChild(doc.documentElement, iframeDoc.documentElement);

}

در کد بالا یک DOMParser جدید با استفاده از متد parseFromString() یک رشته HTML را به یک سند DOM تبدیل می‎کند.