שלוש דרכים ליצור מסמכי HTML על הזבוב

יצירת מסמכי HTML על לטוס, עם או בלי JavaScript, לפעמים יש צורך. אם המטרה היא להציג דף הכרה או iframe המכיל דף שלם, אם המסמך הוא פשוט מספיק זה יכול בקלות ליצור יחד עם כתובות URL או נתונים או JavaScript.

אבל, איך אתה הולך על זה? אני בטוח שאתה כבר יודע איך להוסיף HTML למסמך באמצעות JavaScript, אבל ליצור מסמך HTML שלם? אתה עשוי להיות מעוניין בחלק מהשיטות אני יהיה מראה להלן, הראשון שבהם אפילו לא צריך JavaScript!

אני אראה את כל המסמכים שנוצרו לאחרונה in iframes כך שתוכל לראות אותם שניתנו. עם זאת, אתה יכול להשתמש במסמכים עם זאת אתה רואה לנכון. למשל, הם יכולים להיות נשמר למסד נתונים או נשלח על פני שירותי אינטרנט להינתן במקום אחר.

1. כתובות אתרים של נתונים

כתובות אתרים של נתונים לספק לך שיטה פשוטה ויעילה לשרת מסמכים בדף אינטרנט. אם אתה לא מכיר את זה לקרוא את המאמר הקודם שלנו על איך הם עובדים.

בעיקרון, כתובות אתרים של נתונים להתחיל עם נתונים: סכימת כתובת אתר. זה ואחריו תוכן שיוגש, לפני כן ניתן להזכיר את סוג המדיה וה קידוד התוכן.

אולי ראית תמונות שירתו בדרך זו, היכן תווים 64 Base ניתנים כתוכן של כתובת האתר של הנתונים, לאחר סוג מדיה.

הקוד לעיל מציג תמונת PNG של האיש עם emoji מחשב נייד, אתה יכול לבדוק את זה בדפדפן שלך.

בדומה איך זה נעשה, כתובות URL של נתונים יכולות גם לשמש מסמכי HTMLYou

ה- iframe מעבד את מסמך ה- HTML אשר נוספה באמצעות כתובת האתר של הנתונים המכילה את טקסט / HTML סוג מדיה ואחריו קוד HTML.

אתה יכול לערוך את הדגמה Codepen להלן על ידי הוספת HTML נוסף אם אתה רוצה לראות איך הטכניקה עובדת.

2. ממשק DOMImplementation

DOMImplementation הוא ממשק שיכול ליצור מסמכים חדשים באמצעות או שלה createDocument () (עבור XML) או CreateHTMLDocument () שיטת- לפי מה שאתה צריך. הממשק ניגש באמצעות יישום אובייקט.

ה CreateHTMLDocument () שיטה לוקח פרמטר אופציונלי אחד שהוא הכותרת של המסמך החדש.

אתה יכול הוסף HTML למסמך שנוצר לאחרונה באותו אופן שאתה עושה בדרך כלל: באמצעות שיטות כגון הוסף (), appendChild (), ושיטות JavaScript אחרות הקשורות ל- DOM.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); ("שלום עולם!"); var iframeDoc = document.querySelector ('iframe') contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

בקוד לעיל, א נוצר מסמך HTML חדש משתמש ב CreateHTMLDocument () השיטה של DOMImplementation ממשק ו שלום עולם! הוא מחרוזת הוסיף אלמנט הגוף שלה.

לאחר מכן, כדי לראות כיצד המסמך החדש שנוצר נראה כאשר הוא מוצג, החלפתי את אלמנט המסמך של iframe (iframeDoc.documentElement) עם אלמנט המסמך של המסמך החדש (doc.documentElement) משתמש ב החלףילד () שיטה. בדרך זו, תוכל להיות מסוגל לראות את שלום עולם! מחרוזת מהמסמך שיצרנו והוספנו ל- iframe.

3. DOMParser API

כפי ששמו מרמז, DOMParser API מנתח HTML / XML מחרוזות למסמכי DOM.

חדש DOMParser למשל אובייקט ניתן ליצור באמצעות הבנאי שלה, DOMParser (). המופע מחזיקה בשיטה שנקראת parseFromString () כי עושה את הניתוח לאחר נטילת שני טיעונים: מחרוזת שיש לנתח את סוג המסמך של המסמך להיווצר.

 window.onload = () = = var parser = DOMParser חדש (); var doc = parser.parseFromString ('שלום עולם! ',' טקסט / html '); doc.body.append ('טקסט נוסף'); var iframeDoc = document.querySelector ('iframe') contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

בקוד לעיל, חדש DOMParser למשל מנתח מחרוזת HTML למסמך DOM משתמש ב parseFromString () שיטה.

ואז, באותו אופן כמו בקוד הקוד הקודם, אלמנט המסמך של המסמך החדש שנוצר מחליף את אלמנט המסמך של ה- iframe. כתוצאה מכך, קוד ה- HTML במסמך שיצרנו הופך לגלוי ב- iframe.