Trzy sposoby tworzenia dokumentów HTML w locie

Tworzenie dokumentów HTML w locie, z lub bez JavaScript jest czasami konieczne. Czy celem jest wyświetlenie strony potwierdzenia lub ramki iframe zawierającej całą stronę, jeśli dokument jest wystarczająco prosty, może być łatwo połączone i podawane z adresami URL danych lub JavaScript.

Ale jak się do tego zabrać? Jestem pewien, że już wiesz, jak dodać HTML do dokumentu za pomocą JavaScript, ale do utwórz cały dokument HTML? Być może zainteresują Cię niektóre z metod, które pokażę poniżej, z których pierwsza nie wymaga nawet obsługi JavaScript!

Pokażę wszystkie nowo utworzone dokumenty w ramkach iframe żebyś widział je wyrenderowane. Możesz jednak użyć dokumentów, jakie uznasz za stosowne. Na przykład mogą być zapisane w bazie danych lub wysyłane przez usługi internetowe być wydanym gdzie indziej.

1. Adresy URL danych

Adresy URL danych zapewnić prostą i skuteczną metodę udostępniaj dokumenty na stronie internetowej. Jeśli nie znasz go, przeczytaj nasz poprzedni artykuł na temat ich działania.

Zasadniczo adresy URL danych zacznij od dane: Schemat URL. Po nim następuje treści do doręczenia, przed którym możesz opcjonalnie wspomnieć o typ mediów i kodowanie treści.

Być może widziałeś obrazy w ten sposób znaki base64 są podane jako treść adresu URL danych, po typie nośnika.

Powyższy kod wyświetla obraz PNG mężczyzny z emoji na laptopa - możesz to sprawdzić w przeglądarce.

Podobnie jak to się robi, adresy URL danych mogą również służyć do dokumentów HTML:

 
2. Interfejs DOMImplementation
 
DOMImplementation to interfejs, który może tworzyć zupełnie nowe dokumenty używając albo jego createDocument () (dla XML) lub createHTMLDocument () metoda - w zależności od potrzeb. Dostęp do interfejsu odbywa się za pomocą document.implementation obiekt.
 
The createHTMLDocument () metoda pobiera jeden opcjonalny parametr który jest tytuł nowego dokumentu.
 
Możesz dodaj HTML do nowo utworzonego dokumentu w taki sam sposób, w jaki zwykle robisz: za pomocą metod takich jak dodać(), appendChild (), i inne metody JavaScript związane z 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);  
 
W powyższym kodzie a tworzony jest nowy dokument HTML używając createHTMLDocument () metoda DOMImplementation interfejs i Witaj świecie! ciąg jest dodane do jego elementu ciała.
 
Następnie, aby zobaczyć, jak wygląda nowo utworzony dokument podczas renderowania, zastąpiłem element dokumentu iframe (iframeDoc.documentElement) z elementem dokumentu nowego dokumentu (doc.documentElement) używając replaceChild () metoda. W ten sposób będziesz być w stanie zobaczyć Witaj świecie! strunowy z dokumentu, który stworzyliśmy i dodaliśmy do ramki iframe.
 
 
3. API DOMParser
 
Jak sama nazwa wskazuje, DOMParser API analizuje ciągi HTML / XML w dokumentach DOM.
 
Nowy DOMParser instancja obiektu można utworzyć za pomocą jego konstruktora, DOMParser (). Instancja przechowuje metodę zwaną parseFromString () że wykonuje parsowanie po przejęciu dwóch argumentów: ciąg do przeanalizowania i typ dokumentu, który ma zostać utworzony.
 
  
 
 window.onload = () => var parser = new DOMParser (); var doc = parser.parseFromString ('Witaj świecie! ',' text / html '); doc.body.append („dodatkowy tekst”); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  
 
W powyższym kodzie nowy DOMParser instancja analizuje ciąg HTML do dokumentu DOM używając parseFromString () metoda.
 
Następnie, podobnie jak w poprzednim fragmencie kodu, element dokumentu nowo utworzonego dokumentu zastępuje element dokumentu ramki iframe. W rezultacie kod HTML w utworzonym dokumencie staje się widoczny w elemencie iframe.