HTML, JavaScript » Generar un documento HTML mediante JavaScript
Aunque parezca raro, desde código JavaScript podemos generar dinámicamente una página HTML. Esto nos dará un gran potencial a la hora de devolver respuestas al usuario. Típicamente le devolveremos un alert o crearemos un nuevo elemento dentro de la página con el resultado de la respuesta. Pero, por qué no, la respuesta puede ser una nueva página HTML, creada dinámicamente.
Para poder hacer esto lo primero que vamos a hacer es crear un formulario donde vamos a recoger información del usuario. Será esta información la que utilicemos para crear el documento. Vamos a pedirle un nombre y una edad...
<form action="">
Nombre: <input type="text" id="nombre">
Edad: <input type="text" id="edad">
<input type="button" onClick="crearDocumento(getElementById('nombre').value,
getElementById('edad').value);" value="Crear documento">
</form>Como podemos ver en el código JavaScript, estamos llamando a la función crearDocumento con los valores del formulario. El contenido de dicha función será el objetivo de este documento.
Para crear un documento lo primero que tenemos que hacer es abrirlo. Para ello invocaremos al método open del objeto document. Dicho método recibe como parámetros dos datos. El primero es el mime-type del documento y el segundo sirve para indicar si queremos heredar la historia del documento desde el que se está generando.
Así, abriremos el documento de la siguiente forma:
var doc = document.open("text/html","replace");Al abrir un documento HTML, el mime-type que utilizamos es "text/html".
Lo siguiente será crear el contenido del nuevo documento. Al ser un documento HTML, la estructura será la de cualquier documento HTML. Al menos.
<HTML> <BODY> Contenido </BODY> </HTML>
Así, en JavaScript lo definiremos de la siguiente forma. Sobre una simple variable:
var texto = "<html><body><h1>Saludo</h1>Hola " + nombre + ". Tu edad es de " + edad + " años.";
Con el documento abierto y el texto a volcar definido, lo siguiente será el escribir sobre el documento. Esto lo hacemos mediante el método .write(texto). Sobre el objeto document.
doc.write(texto);
Solo nos quedará la ultima cosa, pero no por ello menos importante, que será la de cerrar el documento.
doc.close();
Artículos relacionados:
Marzo 7, 2009 #
Necesito ayuda!!
Este codigo crea una nueva pagina html dinamicamente.
¿Alguien sabria como salvar la pagina creada, tambien dinamicamente?
Marzo 7, 2009 #
Gracias por adelantado
Abril 4, 2010 #
Jon, por cuestiones de seguridad, javascript no puede acceder al sistema de archivos, por lo cual la pagina creada no se puede salvar.
Abril 5, 2010 #
@Jon,
Como te comente Juan, no puedes hacerlo por motivos de seguridad. Si quieres hacer páginas dinámicas que se salven deberás utilizar un lenguaje de servidor PHP, Java, ASP.Net,…
Octubre 13, 2011 #
Muy instructivo, pero entonces ¿cómo se puede utilizar la página web generada con javascript?, ¿se puede enviar o abrir por medio de un link dentro de las páginas del sistema?
Sería muy interesante saber las posibilidades que este documento tiene.
Muchas gracias.
Octubre 13, 2011 #
Hola @silo,
La página generada realmente no existe, si no que es creada al vuelo por una primera página. Esta primera página es a la que realmente se puede llamar.
Esto sirve para montar cosas al vuelo. Aunque es más recomendable hacerlo mediante páginas de servidor en vez de en local.