A veces es necesario crear documentos HTML sobre la marcha, con o sin JavaScript. Tanto si el objetivo es mostrar una página de aviso como un iframe que contenga una página completa, si el documento es lo suficientemente sencillo puede crearse fácilmente y servirse con URL de datos o JavaScript.

Pero, ¿cómo hacerlo? Seguro que ya sabes cómo añadir HTML a un documento utilizando JavaScript, pero ¿para crear un documento HTML completo? Puede que te interesen algunos de los métodos que voy a mostrar a continuación, ¡el primero de los cuales ni siquiera necesita JavaScript!

Mostraré todos los documentos recién creados en iframes para que puedas verlos renderizados. Sin embargo, puedes utilizar los documentos como mejor te parezca. Por ejemplo, pueden ser guardados en una base de datos o enviados a través de servicios web para ser renderizados en otro lugar.

Datos URIs

URLs de Datos te proporcionan un método sencillo y eficaz para servir documentos en una página web.

Básicamente, las URLs de datos comienzan con el esquema data: Esquema URL. Le sigue el contenido a servir, antes del cual se puede mencionar opcionalmente el tipo de medio y la codificación del contenido.

Es posible que hayas visto imágenes servidas de esta manera, donde los caracteres base64 se dan como el contenido de la URL de datos, a continuación de un tipo de medio.

HTML
<img src="data:image/png;base64,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"
alt="man with a computer">

El código anterior muestra una imagen PNG del hombre con un emoji de ordenador portátil; puedes comprobarlo en tu navegador.man with a computer

De forma similar, las URL de datos también pueden servir documentos HTML:

HTML
<iframe src='data:text/html,<strong>¡Hola Mundo!</strong>'></iframe>

El iframe renderiza el documento HTML que se ha añadido utilizando la URL de datos que contiene el tipo de medio text/html & seguido del código HTML.

Si quieres ver cómo funciona esta técnica, puedes editar la demostración de Codepen que aparece a continuación añadiéndole HTML adicional.

See the Pen Documento HTML con URL Datos by Alex (@htmldesdecero) on CodePen.

Interfaz DOMImplementation

DOMImplementation es una interfaz que puede crear documentos nuevos utilizando su método createDocument() (para XML) o createHTMLDocument(), según lo que necesites. Se accede a la interfaz mediante el objeto document.implementation.

El método createHTMLDocument() toma un parámetro opcional que es el título del nuevo documento.

Puedes añadir HTML a un documento recién creado de la misma forma que lo haces habitualmente: utilizando métodos como append(), appendChild() y otros métodos JavaScript relacionados con el DOM.

HTML
<iframe src=""></iframe>
JavaScript
window.onload = () => {
  var doc = document.implementation.createHTMLDocument();
  doc.body.append('¡Hola Mundo!');
  var iframeDoc = document.querySelector('iframe').contentDocument;
  iframeDoc.replaceChild(
  doc.documentElement,
  iframeDoc.documentElement
  );
}

En el código anterior, se crea un nuevo documento HTML utilizando el método createHTMLDocument() de la interfaz DOMImplementation y se añade la cadena ¡Hola Mundo! a su elemento body.

Después, para ver cómo queda el documento recién creado cuando se renderiza, he sustituido el elemento document del iframe (iframeDoc.documentElement) por el elemento document del nuevo documento (doc.documentElement) utilizando el método replaceChild(). De esta forma, podrás ver la cadena ¡Hola Mundo! del documento que hemos creado y añadido al iframe.

See the Pen Documento HTML con Interfaz DOMImplementation by Alex (@htmldesdecero) on CodePen.

API DOMParser

Como su nombre indica, la API DOMParser analiza cadenas HTML/XML para convertirlas (parsing) en documentos DOM.

Se puede crear una nueva instancia del objeto DOMParser utilizando su constructor, DOMParser(). La instancia contiene un método llamado parseFromString() que realiza el análisis sintáctico tras tomar dos argumentos: la cadena que se va a analizar y el tipo de documento que se va a crear.

HTML
<iframe src=""></iframe>
JavaScript
window.onload = () => {
  var parser = new DOMParser();
  var doc = parser.parseFromString('<strong>¡Hola Mundo! </strong>', "text/html");
  doc.body.append('texto extra');
  var iframeDoc = document.querySelector('iframe').contentDocument;
  iframeDoc.replaceChild(doc.documentElement, iframeDoc.documentElement);
}

En el código anterior, una nueva instancia de DOMParser convierte una cadena HTML en un documento DOM mediante el método parseFromString().

A continuación, del mismo modo que en el fragmento de código anterior, el elemento document del documento recién creado sustituye al elemento document del iframe. Como resultado, el código HTML del documento que hemos creado se hace visible en el iframe.

See the Pen Documento HTML con la API DOMParser by Alex (@htmldesdecero) on CodePen.

Cada una de estas opciones tiene sus ventajas y puede adaptarse a diferentes situaciones y necesidades. Los ejemplos y demostraciones proporcionados en el post ayudan a comprender mejor cómo implementar estas técnicas y cómo se renderiza el contenido generado en iframes.

En conclusión, el post ofrece una guía completa y práctica para aquellos interesados en crear documentos HTML de manera dinámica, permitiendo a los desarrolladores y diseñadores web utilizar estas técnicas según sus requerimientos específicos para generar contenido atractivo y adaptado a diversas situaciones.

5/5 - (1 voto)