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