ثلاث طرق لإنشاء مستندات HTML على الطاير

إنشاء مستندات HTML على الطاير, مع أو بدون جافا سكريبت ، من الضروري في بعض الأحيان. سواء كان الهدف هو عرض صفحة إقرار أو إطار iframe يحتوي على صفحة كاملة ، إذا كان المستند بسيطًا بدرجة كافية ، فيمكن أن يكون ذلك سهلاً توضع وتُقدم مع عناوين URL للبيانات أو JavaScript.

ولكن كيف يمكنك أن تذهب نحو ذلك؟ أنا متأكد من أنك تعرف بالفعل كيفية إضافة HTML إلى مستند باستخدام JavaScript ، ولكن إلى إنشاء مستند HTML بأكمله? قد تكون مهتمًا ببعض الطرق التي سأعرضها أدناه ، أولها لا يحتاج إلى JavaScript!

سأعرض كل المستندات التي تم إنشاؤها حديثًا في iframe بحيث يمكنك رؤيتهم تقدم. ومع ذلك ، يمكنك استخدام المستندات التي تراها مناسبة. على سبيل المثال ، يمكن أن يكونوا حفظها في قاعدة البيانات أو أرسلت عبر خدمات الويب ليتم تقديمها في مكان آخر.

1. عناوين URL للبيانات

عناوين URL للبيانات توفر لك طريقة بسيطة وفعالة ل تقديم المستندات على صفحة الويب. إذا لم تكن على دراية بذلك ، اقرأ مقالتنا السابقة عن كيفية عملها.

في الأساس ، عناوين URL للبيانات نبدأ مع البيانات: مخطط URL. ويليها المحتوى المطلوب تقديمه, قبل ذلك يمكنك اختياريا ذكر نوع الوسائط و ال ترميز المحتوى.

ربما شاهدت الصور تقدم بهذه الطريقة ، أين base64 حرفا يتم تقديمها كمحتوى لعنوان URL للبيانات ، بعد نوع الوسائط.

يعرض الرمز أعلاه صورة PNG للرجل مع جهاز كمبيوتر محمول تعبيري - يمكنك التحقق من ذلك في متصفحك.

على غرار كيف يتم ذلك, يمكن لعناوين URL للبيانات أيضًا تقديم مستندات HTML:

iframe يعرض وثيقة HTML تمت إضافته باستخدام عنوان URL للبيانات الذي يحتوي على نص / HTML نوع الوسائط متبوعًا بكود HTML.

يمكنك تحرير العرض التوضيحي لـ Codepen أدناه عن طريق إضافة HTML إضافي إليها إذا كنت تريد أن ترى كيف تعمل هذه التقنية.

2. واجهة DOMImplementation

DOMImplementation هي واجهة يمكن إنشاء مستندات جديدة باستخدام إما لها createDocument () (XML) أو createHTMLDocument () الطريقة - أيهما تحتاج. يتم الوصول إلى واجهة باستخدام document.implementation موضوع.

ال createHTMLDocument () طريقة يأخذ معلمة واحدة اختيارية وهو عنوان المستند الجديد.

يمكنك إضافة HTML إلى مستند تم إنشاؤه حديثًا بنفس الطريقة التي عادة ما تفعلها: باستخدام طرق مثل ألحق(), إلحاق الطفل(), وطرق JavaScript الأخرى المتعلقة بـ DOM.

 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 () طريقة لل DOMImplementation واجهة و مرحبا بالعالم! السلسلة هي يضاف إلى عنصر الجسم.

بعد ذلك ، لمعرفة كيف يبدو المستند الذي تم إنشاؤه حديثًا عند تقديمه ، استبدلت عنصر المستند في iframe (iframeDoc.documentElement) مع عنصر المستند في المستند الجديد (doc.documentElement) باستخدام replaceChild () طريقة. بهذه الطريقة ، سوف تكون قادرة على رؤية مرحبا بالعالم! خيط من الوثيقة التي أنشأناها وأضفناها إلى iframe.

3. واجهة برمجة تطبيقات DOMParser

كما يوحي اسمها ، و DOMParser API يوزع سلاسل HTML / XML في مستندات DOM.

جديد DOMParser مثيل الكائن يمكن إنشاؤها باستخدام منشئها, DOMParser (). المثيل يحمل طريقة تسمى parseFromString () أن هل التحليل بعد أخذ حجتين: السلسلة المراد تحليلها ونوع مستند المستند المراد إنشاؤه.

 window.onload = () => var parser = new DOMParser ()؛ var doc = parser.parseFromString ('مرحبا بالعالم! '، "text / html")؛ doc.body.append ('نص إضافي') ؛ var iframeDoc = document.querySelector ('iframe'). contentDocument؛ iframeDoc.replaceChild (doc.documentElement، iframeDoc.documentElement)؛  

في الرمز أعلاه ، جديد DOMParser حتة يوزع سلسلة HTML إلى مستند DOM باستخدام parseFromString () طريقة.

بعد ذلك ، بنفس الطريقة الموجودة في مقتطف الشفرة السابق ، عنصر المستند للمستند المنشأ حديثًا يستبدل عنصر مستند iframe. نتيجة لذلك ، يصبح رمز HTML في المستند الذي أنشأناه مرئيًا في iframe.