Menu
I'm testing some JavaScript code, and realized that this code...
var msg = "Hello, World!";
document.open();
document.write(msg);
document.close();
...has the same result as this one:
var msg = "Hello, World!";
document.write(msg);
What's the difference?
792
open() method opens a document for writing. This does come with some side effects. For example: All event listeners currently registered on the document, nodes inside the document, or the document's window are removed.
The Document. close() method finishes writing to a document, opened with Document.
HTML DOM Document close() The close() method closes a window previously opened with the open() method.
The Window. close() method closes the current window, or the window on which it was called. This method can only be called on windows that were opened by a script using the Window. open() method.
Much behaviour around document.write was established before formal specifications so behaviour is inconsistent and somewhat arbitrary across browsers. However, behaviour is now fairly consistent but there are differences depending on when it's called.
The use of document.write is largely discouraged, however it's still useful. It's ubiquitous support means it can be used as a replacement for other techniques if really old browsers need to be accommodated.
If you use document.write while the document is loading (e.g. a script element in the document source), then there is no need to call open or close. The document is opened when navigated to and closed when the content has finished loading (i.e. when the load event occurs). So as long as all the write statements are executed before load occurs, the browser will do the rest.
Once the document has finished loading (e.g. the load event has been dispatched), then a call to document.write will first call clear which will clear the entire content of the document, everything. In this case, not all browsers will automatically call close when the call to write ends.
Some browsers take a guess and seem to call close at some later time (IE?), others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour.
If you open a child window, e.g. using window.open, then write to it from the parent, the write will occur after the page has finished loading so it will clear the document. e.g.
function openWindow() {
var win = window.open('http://www.google.com','','')
win.document.write(
'<!doctype html><title>foo</title><div>Here is a div</div>'
)
win.document.close();
}
In this case you'll never see Google, the call to write clears the page the moment it loads and writes the new content.
Also, browsers won't automatically call close, you can make subsequent calls to document.write and they will append to the existing markup, e.g.
// Global
var win;
// Open new window and write to it, don't close
function openWindow() {
win = window.open('http://www.google.com','','')
win.document.write(
'<!doctype html><title>foo</title><div>Here is a div</div>'
)
}
// Call some time later, content will be appended
function writeToWindow(){
win.document.write(
'<div>Here is the second div</div>'
)
}
You may see some animation on the tab or window showing that it's still loading.
If, in the above, openWindow calls document.close before ending, then the subsequent call to writeToWindow will clear the document first so that the div is the only element in the document (along with the mandatory HTML, HEAD and BODY elements automatically added by the browser and probably a TITLE added by error correction).
Therefore, you should call close at an appropriate point in this case.
If the following is called during load, then:
var msg = "Hello, World!";
// The following has no effect as the document is currently
// loading, therefore already open
document.open();
// Writes to the document
document.write(msg);
// The following has no effect because the window hasn't fired load yet
document.close();
So only the document.write line does anything useful in this case.
Some play code:
var win;
function openWindow() {
win = window.open('http://www.google.com','','')
win.document.write(
'<!doctype html><title>foo</title><div>Here is a div</div>'
)
win.document.close();
}
function writeToWindow(){
win.document.write(
'<div>Here is the second div</div>'
)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
