Are document.open and document.close necessary?

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?

标签： javascript

3条回答

beautiful°

2楼-- · 2020-05-27 04:39

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.

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>'
  )
}

0人赞添加讨论(0) 举报

一纸荒年 Trace。

3楼-- · 2020-05-27 04:41

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

0人赞添加讨论(0) 举报

小情绪 Triste *

4楼-- · 2020-05-27 04:42

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

0人赞添加讨论(0) 举报