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?
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?
Share Improve this question edited Nov 20, 2015 at 9:20 zb226 10.5k6 gold badges55 silver badges87 bronze badges asked Jan 9, 2015 at 5:41 reidarkreidark 9104 gold badges11 silver badges22 bronze badges3 Answers
Reset to default 17Much 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.
While a document is loading
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.
After window load event dispatched
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.
Child windows
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.
The OP
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>'
)
}
The difference between open() and write() is that open() clears the document so you can write to it. write() actually puts stuff in the document.
Explicitly calling document.open()/document.close() is not necessary as document.write() implicitly handles open() when the page has loaded and close() when finished.
Read the documentation here
- document.open
heres a fiddle example http://jsfiddle.net/8stv489e/
with this code
var msg = "Hello, World! first";
document.write(msg);
var msg = "Hello, World! second";
document.open();
document.write(msg);
document.close();
As you can see in the fiddle, the document contents are overwritten as the document is reinitialized on open().
read this https://developer.mozilla.org/en-US/docs/Web/API/document.open
- document.close
while document.close need not be done anywhere explixitly. document.write automatically closes the stream
Edit:
document.write does not necessarily always close the document if write was called after the document had finished loading (Firefox for example). In that case (e.g. writing to a child window opened using window.open), it's a good precaution to always call close when finished writing. Contribution @RobG