Document.write method questions

Question

I'm experimenting with write method & onload event. Here is my code:

<!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>

If i run this in browser it outputs "img loadeld" and just "hangs", seems to be loading the page infinitely. I expected the browser outputs "img loadeld" and then as the body element is ready "body loaded" and just stops as normally.

My questions:

Why is there such a hang? Why the onload event on img element blocks the browser from continuing & rendering "body loaded"?
Why if i remove onload handler from img element the reponse is as expected - "body loaded" and the page isn't blocked.

Thanks for Your answer:-) **1.)** So body onload event occurs BEFORE document has been closed and it's closed & no loading spinner therefore. I'am i right? So why when i use such a code: `
Hello World!
` the first alert is "img loadeld" NOT "body loaded" ??? **2.)** Why do i have to explicitly call document close after the image is loaded while i haven't done that after body onload="document.write? If the event is automatically performed in the last case (body onload)? — Mulligan, Sep 12 '12 at 07:05

score 3 · Answer 1 · answered Sep 11 '12 at 18:56

3

Simply put, calling document.write() after DOM ready causes it to overwrite the existing DOM.

answered Sep 11 '12 at 18:56

chrisfrancis27

4,516
1
24
32

JAAulde · Answer 2 · 2012-09-11T22:42:09.550

Everything is working correctly (though not as you expected), and nothing is "hanging" or "blocking." It's all happening so fast, however, that it does not appear as such. Hopefully an explanation of the workings of writing to the document and the order of events will assist you:

Your IMG onload event fires after the document has been closed (document ready has been reached).

document.write(), however, can only output to an open document.

If a document has been closed, document.write() (docs) implicitly calls document.open() (docs) which wipes the entire document. Your call to write then outputs what you told it to. The document remains open until it is explicitly closed (document.close() (docs)), so the "loading spinner" continues to show.

The basic flow of operations, then, which is taking place (so quickly that you don't notice it all happening and things look broken) is:

page request made
page response received
document is opened, content is parsed and put into place, including the first document.write (does not have to call open because document is currently open)
document closes
Retrieval for the IMG tag completes and the event fires
event handler calls document.write
document is implicitly re-opened (new doc created, all content lost; loading spinner displayed)
your argument to document.write() is outputted into the new document
everything is complete, document is still open

DOM manipulation techniques (appendChild(), writting to innerHTML, etc) should be used Instead of document.write in order to modify existing content without overwriting everything.

The good news in this is that since this is happening, you do know that your image is loading successfully. You just gotta work out the right way to react to it as I eluded to earlier.

Alex Dn · Answer 3 · 2012-09-11T19:01:49.343

0

When document.write used inside of function after html is loaded, it writes to new html document. onload is an event handler, so <img onload="document.write('img loadeld!')"/> = img.onload = function(event){document.write('img loadeld!');}.
It not blocks page loading, it just creates new blank html document.

edited Sep 11 '12 at 19:01

answered Sep 11 '12 at 18:56

Alex Dn

5,465
7
41
79

score 0 · Answer 4 · answered Sep 11 '12 at 18:56

That's because document.write() clears the entire document, and then writes the argument to the page, try document.writeln('Img loaded'); to append to the body, but to stick to what you really want:

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

Or write a function that creates an element and use document.body.appendChild(elem), in which case you can replace document.body with any block element

score 0 · Answer 5 · answered Sep 11 '12 at 18:56

0

Create a message container, such as a DIV and set the innerHTML, don't use .write()

answered Sep 11 '12 at 18:56

Diodeus - James MacFarlane

112,730
33
157
176

Document.write method questions

Hello World!

5 Answers5

Linked