Flujo de escritura del documento

  • Por
Es el proceso en el que el navegador escribe la página. Para escribir en la página desde Javascript el flujo del documento debe estar abierto.

Acerca del objeto document también es interesante hablar un poco sobre el flujo de escritura del documento o página web.

Cuando el navegador lee una página web la va interpretando y escribiendo en su ventana. El proceso en el que el navegador está escribiendo la página le llamamos flujo de escritura del documento. El flujo comienza cuando se empieza a escribir la página y dura hasta que ésta ha terminado de escribirse. Una vez terminada la escritura de la página el flujo de escritura del documento se cierra automáticamente. Con esto termina la carga de la página.

Una vez cerrado el flujo no se puede escribir en la página web, ni texto ni imágenes ni otros elementos.

En javascript tenemos que respetar el flujo de escritura del documento forzosamente. Es por ello que sólo podemos ejecutar sentencias document.write() (método write() del objeto document) cuando está abierto el flujo de escritura del documento, o lo que es lo mismo, mientras se está cargando la página.

Si recordamos las dos formas de ejecutar un script en Javascript:

  • Ejecución de los scripts mientras que carga la página. Aquí podremos ejecutar document.write() y lo hemos hecho habitualmente en los ejemplos anteriores.
  • Ejecución de los scripts cuando la página ha sido cargada, como respuesta a un evento del usuario. Aquí no podemos hacerlo porque la página ha terminado de cargarse, de hecho, no lo hemos hecho nunca hasta ahora.

Hay un matiz que dar a que no se puede escribir en la página cuando ya está cerrado el flujo. En realidad si que se puede, pero necesitamos abrir el flujo otra vez para escribir en la página, tanto es así que aunque nosotros no lo abramos explícitamente Javascript se encargará de ello. Lo que tiene que quedar claro es que si hacemos un document.write() el flujo tiene que estar abierto y si no lo está se abrirá. El problema de abrir el flujo de escritura del documento una vez ya está escrita la página es que se borra todo su contenido.

Para que quede claro vamos a hacer un script para escribir en la página una vez ésta ha sido cargada. Simplemente necesitamos un botón y al pulsarlo ejecutar el método write() del objeto document.

<form> 
<INPUT type=button value=escribir onclick="window.document.write('hola')"> 
</form>

Si nos fijamos, en el manejador de eventos onclick hemos colocado la jerarquía de objetos desde el principio, es decir, empezando por el objeto window. Esto es porque hay algunos navegadores que no sobreentienden el objeto window en las sentencias escritas en los manejadores de eventos.

Podemos ver el ejemplo en funcionamiento.

El resultado de la ejecución puede variar de un navegador a otro, pero en cualquier caso se borrará la página que se está ejecutando.

Métodos open() y close() de document

Los métodos open() y close() del objeto document sirven para controlar el flujo del documento desde Javascript. Nos permiten abrir y cerrar el documento explícitamente.

El ejemplo de escritura en la página anterior se debería haber escrito con su correspondiente apertura y cierre del documento y hubiese quedado algo parecido a esto.

<script> 
function escribe(){ 
   	document.open() 
   	window.document.write('Hola') 
   	document.close() 
} 
</script> 
<form> 
<INPUT type=button value=escribir onclick="escribe()"> 
</form>

Vemos que ahora no escribimos las sentencias dentro del manejador, porque, cuando hay más de una sentencia, queda más claro poner una llamada a una función y en la función colocamos las sentencias que queramos.

Las sentencias del ejemplo anterior, que cubren la apertura, escritura y cierre del documento. Se pueden ver en marcha aquí.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Pedro

20/11/2003
Este ejemplo de flujo no funciona, cuando pulsas el boton la funcion sobreescribe la página.
¿como conseguir que no se sobreescriba con el onclick()?

TyrantRC

07/2/2011
RE:Pedro
RE:Este ejemplo de flujo no funciona, cuando pulsas el boton la funcion sobreescribe la página.
¿como conseguir que no se sobreescriba con el onclick()?

El problema es precisamente ese .. en este articulo se explica porque exactamente no puedes escribir sobre el documento una vez cerrado el flujo

El flujo empieza desde que tu explorador carga la pagina hasta que la termina de cargar... Cuando termina si llegas a abrir el flujo del documento .. este se borra y se crea una nuevo y hace el efecto de como si se borrara la pagina. En realidad es la misma pagina, solo que pierdes su contenido.

EdValdez

11/8/2012
Y como solucionamos?
Y entonces como solucionamos el problema?

chuy

25/6/2013
No funciona el ejemplo
Cierto no funciona, al dar click desaparece todo

ASA181192

02/11/2014
Muy buenos tutoriales
Hace como unos dos dias que e estado entrando su pagina y me meti a javascript y e estado siguien el tutorial desde el manual basico , muchas cosas se me hace muy sencillas en comparacion a otros lenguajes como java , C++ etc , con respecto a este tema del flujo tengo una duda si al realizar una llamada al metodo write () despues de que el flujo a sido cerrado, este hace que se borre todo el contenido anterior , ¿hay alguna forma de solucionarlo , o algun otro metodo que incruste texto sobre la pagina sin alterar el flujo? . Saludos ...