Τρεις τρόποι για να δημιουργήσετε έγγραφα HTML στη μύγα

Δημιουργία εγγράφων HTML σε κίνηση, με ή χωρίς JavaScript, είναι μερικές φορές απαραίτητο. Αν ο στόχος είναι να εμφανιστεί μια σελίδα επιβεβαίωσης ή ένα iframe που περιέχει μια ολόκληρη σελίδα, εάν το έγγραφο είναι αρκετά απλό, μπορεί εύκολα να είναι συνθέτουν και εξυπηρετείται είτε με διευθύνσεις URL δεδομένων είτε με JavaScript.

Αλλά, πώς να το κάνεις; Είμαι βέβαιος ότι γνωρίζετε ήδη πώς να προσθέσετε HTML σε ένα έγγραφο χρησιμοποιώντας JavaScript, αλλά σε δημιουργήστε ένα ολόκληρο έγγραφο HTML? Μπορεί να σας ενδιαφέρει μερικές από τις μεθόδους που θα εμφανίζονται παρακάτω, το πρώτο από το οποίο δεν χρειάζεται καν JavaScript!

Θα παρουσιάσω όλα τα νεοδημιουργημένα έγγραφα σε iframes ώστε να μπορείτε να τα δείτε. Ωστόσο, μπορείτε να χρησιμοποιήσετε τα έγγραφα που θεωρείτε κατάλληλα. Για παράδειγμα, μπορούν να είναι αποθηκεύονται σε μια βάση δεδομένων ή αποστέλλονται μέσω διαδικτυακών υπηρεσιών να γίνει κάπου αλλού.

1. Διευθύνσεις URL δεδομένων

Διευθύνσεις URL δεδομένων σας παρέχει μια απλή και αποτελεσματική μέθοδο να προβάλλετε έγγραφα σε μια ιστοσελίδα. Αν δεν είστε εξοικειωμένοι με αυτό, διαβάστε το προηγούμενο άρθρο σχετικά με το πώς λειτουργούν.

Βασικά, οι διευθύνσεις URL δεδομένων ξεκινήστε με το δεδομένα: Σχέδιο διευθύνσεων URL. Ακολουθεί το περιεχόμενο που πρέπει να εξυπηρετηθεί, πριν από την οποία μπορείτε να αναφέρετε προαιρετικά το Τύπος πολυμέσων και το κωδικοποίηση του περιεχομένου.

Μπορεί να έχετε δει εικόνες που εξυπηρετούνται με αυτό τον τρόπο, όπου βασικοί χαρακτήρες64 δίνονται ως περιεχόμενο της διεύθυνσης δεδομένων, ακολουθώντας έναν τύπο μέσου.

Ο παραπάνω κώδικας εμφανίζει μια εικόνα PNG του ανθρώπου με ένα laptop emoji - μπορείτε να το ελέγξετε στο πρόγραμμα περιήγησής σας.

Παρόμοια με το πώς γίνεται αυτό, οι διευθύνσεις URL δεδομένων μπορούν επίσης να εμφανίζουν έγγραφα HTML:

Το iframe κάνει το έγγραφο HTML που προστέθηκε χρησιμοποιώντας τη διεύθυνση URL δεδομένων που περιέχει το κείμενο / html Τύπος μέσου & ακολουθούμενο από τον κώδικα HTML.

Μπορείτε να επεξεργαστείτε το demo του Codepen παρακάτω, προσθέτοντας επιπλέον HTML σε αυτό, εάν θέλετε να δείτε πώς λειτουργεί η τεχνική.

2. Διεπαφή υλοποίησης DOMI

Υλοποίηση DOMI είναι ένα περιβάλλον που μπορεί δημιουργήστε ολοκαίνουργια έγγραφα χρησιμοποιώντας είτε του createDocument () (για XML) ή createHTMLDocument () μέθοδο - όποια από τις οποίες χρειάζεστε. Η διεπαφή είναι προσπελάσιμη χρησιμοποιώντας το document.implementation αντικείμενο.

ο createHTMLDocument () μέθοδος λαμβάνει μία προαιρετική παράμετρο Ποιο είναι το τίτλου του νέου εγγράφου.

Μπορείς προσθέστε HTML σε ένα πρόσφατα δημιουργημένο έγγραφο με τον ίδιο τρόπο που συνήθως κάνετε: χρησιμοποιώντας μεθόδους όπως προσαρτώ(), appendChild (), και άλλες μεθόδους JavaScript που σχετίζονται με το DOM.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ('Hello World!'); var iframeDoc = document.querySelector ('iframe'). iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Στον παραπάνω κώδικα, α δημιουργείται νέο έγγραφο HTML χρησιμοποιώντας το createHTMLDocument () μέθοδος του Υλοποίηση DOMI τη διεπαφή και το Γειά σου Κόσμε! είναι χορδή προστέθηκε στο στοιχείο του σώματός του.

Στη συνέχεια, για να δείτε πώς φαίνεται το νεοδημιουργημένο έγγραφο όταν εκδοθεί, αντικατέστησα το στοιχείο εγγράφου του iframe (iframeDoc.documentElement) με το στοιχείο εγγράφου του νέου εγγράφου (doc.documentElement) χρησιμοποιώντας το replaceChild () μέθοδος. Με αυτό τον τρόπο, θα το κάνετε να είναι σε θέση να δει το Γειά σου Κόσμε! σειρά από το έγγραφο που δημιουργήσαμε και το οποίο προστέθηκε στο iframe.

3. API DOMParser

Όπως υποδηλώνει το όνομά της, το DOMParser API αναλύει τις συμβολοσειρές HTML / XML στα έγγραφα DOM.

Ενα νέο DOMParser αντικείμενο αντικειμένου μπορεί να δημιουργηθεί χρησιμοποιώντας τον κατασκευαστή του, DOMParser (). Το στιγμιότυπο περιέχει μια μέθοδο που ονομάζεται parseFromString () ότι κάνει την ανάλυση μετά από δύο επιχειρήματα: η συμβολοσειρά που πρόκειται να αναλυθεί και ο τύπος εγγράφου του εγγράφου που πρόκειται να δημιουργηθεί.

 window.onload = () => var parser = νέο DOMParser (); var doc = parser.parseFromString ('Γειά σου Κόσμε! ',' text / html '). doc.body.append ('έξτρα κείμενο'); var iframeDoc = document.querySelector ('iframe'). iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Στον παραπάνω κώδικα, ένα νέο DOMParser παράδειγμα αναλύει μια συμβολοσειρά HTML σε ένα έγγραφο DOM χρησιμοποιώντας το parseFromString () μέθοδος.

Στη συνέχεια, με τον ίδιο τρόπο όπως στο προηγούμενο απόσπασμα κώδικα, το στοιχείο εγγράφου του νεοσυσταθέντος εγγράφου αντικαθιστά το στοιχείο εγγράφου του iframe. Ως αποτέλεσμα, ο κώδικας HTML στο έγγραφο που δημιουργήσαμε γίνεται ορατό στο iframe.