Estoy experimentando con el método de escritura & onload event. Aquí está mi código:Preguntas sobre el método Document.write

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body onload="document.write('body loaded!')"> 
     <h1>Hello World!</h1> 
     <img onload="document.write('img loadeld!')" src="smiley.gif" alt="Smiley face" width="42" height="42" /> 
    </body> 
</html>

Si corro esto en el navegador emite "loadeld img" y sólo "cuelga", parece ser la carga de la página infinitamente. Esperaba que el navegador emita "img loadeld" y luego cuando el elemento del cuerpo esté listo "cargada" y simplemente se detiene como normalmente.

Mis preguntas:

Por qué hay tal un bloqueo? ¿Por qué el evento onload en el elemento img bloquea el navegador para continuar "&" cargándose "cargados"?
¿Por qué si elimino el controlador de carga del elemento img la respuesta es la esperada - "cargada" y la página no está bloqueada.

Fuente

2012-09-11 Mulligan

Gracias por su respuesta :-) ** 1.) ** Por lo tanto, el evento de carga del cuerpo se produce ANTES de que el documento se haya cerrado y esté cerrado y no se haya cargado la ruleta. Yo estoy en lo cierto? Entonces ¿por qué cuando se utiliza un código de este tipo: ' \t \t

Hello World!

\t \t ' la primera alerta es "loadeld img" NO "cuerpo cargado" ??? ** 2.) ** ¿Por qué tengo que llamar explícitamente documento cerrado después de cargar la imagen mientras no lo he hecho después de body onload = "document.write? Si el evento se realiza automáticamente en el último caso (body onload)? – Mulligan

Cuando document.write usan dentro de la función después de cargar el HTML, se escribe a nuevo documento HTML. onload es un controlador de eventos, por lo que <img onload="document.write('img loadeld!')"/> = img.onload = function(event){document.write('img loadeld!');}.
No bloquea la carga de la página, simplemente crea un nuevo documento html en blanco.

Fuente

2012-09-11 18:56:14

Eso es porque document.write() borra todo el documento, y luego escribe el argumento a la página, pruebe document.writeln('Img loaded'); adjuntar al cuerpo, sino que atenerse a lo que realmente desea:

<img onload="document.body.innerHTML += '<h1>Loaded</h1>'"'

O escribir una función que crea un elemento y utilizar document.body.appendChild(elem), en cuyo caso se puede sustituir document.body con cualquier elemento de bloque

Fuente

2012-09-11 18:56:34

Crear un contenedor de mensajes, tales como DIV y establecer el innerHTML, no utilice. write()

Fuente

2012-09-11 18:56:36

En pocas palabras, llamando al document.write()después de DOM ready hace que sobrescriba el DOM existente.

Fuente

2012-09-11 18:56:42

Gracias por su detallada respuesta :-) – Mulligan

Todo funciona correctamente (aunque no como era de esperar), y no hay nada "colgando" o "bloqueando". Todo está sucediendo tan rápido, sin embargo, que no aparece como tal. Esperemos que una explicación del funcionamiento de la escritura en el documento y el orden de los eventos lo ayude:

Su evento de carga IMG se dispara después de que el documento se haya cerrado (documento listo ha sido alcanzado).

document.write(), sin embargo, solo puede dar salida a un documento abierto.

Si un documento ha sido cerrado, document.write() (docs) llama implícitamente document.open() (docs) que borra todo el documento. Su llamada al write luego muestra lo que le indicó. El documento permanece abierto hasta que se cierre explícitamente (document.close() (docs)), por lo que el "generador de carga" continúa mostrando.

El flujo básico de operaciones, entonces, que está teniendo lugar (tan rápidamente que no se dan cuenta que todo pasa y las cosas se ven roto) es:

solicitud de página hecha respuesta
página recibida
documento se abre, el contenido se analiza y pone en su lugar, incluyendo la primera document.write (no tiene que llamar abierto porque el documento está abierto actualmente)
documento cierra
La recuperación de la etiqueta IMG finaliza y el evento se desencadena
controlador de eventos llama a document.write
el documento se vuelve a abrir de forma implícita (se crea un nuevo documento, se pierde todo el contenido; representada carga spinner)
su argumento para document.write() se emite en el nuevo documento
todo está completo, documento está todavía abierta

técnicas de manipulación DOM (appendChild(), escribiendo a innerHTML, etc) deben utilizarse en lugar de document.write para modificar el contenido existente sin sobreescribirlo todo.

La buena noticia en esto es que ya que esto está sucediendo, usted sabe que su imagen se está cargando con éxito. Simplemente tienes que entrenar de la manera correcta para reaccionar como lo he eludido antes.

Fuente

2012-09-11 18:58:47 JAAulde

Preguntas sobre el método Document.write

Hello World!

Respuesta

Cuestiones relacionadas