سه روش برای ساخت اسناد HTML در زمان اجرا
ساخت اسناد HTML در زمان کار و اجرای صفحات وب بعضی اوقات ضروری است. این که شما بخواهید یک صفحه اطلاعیه را به نمایش بگذارید و یا یک iframe با محتوای کل صفحه را فراخوانی کنید، اگر سند به اندازه کافی ساده باشد می‎توان اینها را کنار یک‌دیگر قرار داده و از طریق داده URL یا جاوا اسکریپت ارائه کرد. اما شما چگونه این کار را انجام می‎دهید؟

مطمئنا شما همین حالا هم می‎دانید که چگونه با استفاده از جاوا اسکریپت 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 تبدیل می‎کند.

ماهنامه شبکه را از کجا تهیه کنیم؟
ماهنامه شبکه را می‌توانید از کتابخانه‌های عمومی سراسر کشور و نیز از دکه‌های روزنامه‌فروشی تهیه نمائید.

ثبت اشتراک نسخه کاغذی ماهنامه شبکه     
ثبت اشتراک نسخه آنلاین

 

کتاب الکترونیک +Network راهنمای شبکه‌ها

  • برای دانلود تنها کتاب کامل ترجمه فارسی +Network  اینجا  کلیک کنید.

کتاب الکترونیک دوره مقدماتی آموزش پایتون

  • اگر قصد یادگیری برنامه‌نویسی را دارید ولی هیچ پیش‌زمینه‌ای ندارید اینجا کلیک کنید.

1607870047_0.gif

ایسوس

نظر شما چیست؟