Does using "Document.open" and "Document.close" make a difference?

Asked

Viewed 366 times

7

I saw in a certain answer from SOEN a question about printing iframe content.

I ended up encountering an excerpt of code where I had the following:

var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();

I was curious to know what that one was document.close. Then I ended up looking at the W3schools.

There is an example of using document.open and document.close, thus:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to open an output stream, add some text, and close the output stream.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.open();
    document.write("<h1>Hello World</h1>");
    document.close();
}
</script>

</body>
</html>

But I noticed that both with document.close or without, nothing different happens in the examples (the same goes for document.open).

See without the document.open:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to open an output stream, add some text, and close the output stream.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.write("<h1>Hello World</h1>");
    document.close();
}
</script>

</body>
</html>

See without the document.close:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to open an output stream, add some text, and close the output stream.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.open();
    document.write("<h1>Hello World</h1>");
}
</script>

</body>
</html>

So, after all, what’s the point document.open or document.close?

I think that besides not being clear to me the use, seems to be of no use.

Is there a case where I really have to use one or the other?

javascript html

2 answers

15


Document.open

The operation document.open opens a document for writing (output stream) and if there is already a document instance in document, its contents are overwritten. See below:

<!DOCTYPE html>
<html>
  <body>

    <p>Click the button to open an output stream, add some text, and close the output stream.</p>

    <button onclick="myFunction()">Try it</button>

    <script>
      function myFunction() {
        document.open();
        document.close();
      }
    </script>

  </body>
</html>

Realize that just by opening and closing the document data stream, all the contents of document, which by default is the page itself, is overwritten.

Document.

Already the operation document.close closes the document for writing, reverse process of document.open. Note that if this operation is not executed after the document.open, to stream the document will be open and the browser itself understands this as if the page is not ready.

<!DOCTYPE html>
<html>
  <body>

    <p>Click the button to open an output stream, add some text, and close the output stream.</p>

    <button onclick="myFunction()">Try it</button>

    <script>
      function myFunction() {
        document.open();
      }
    </script>

  </body>
</html>

See that the browser icon indicates that the page is loading:

inserir a descrição da imagem aqui

The browser remains so until the operation document.close or the page is reloaded.

Document.write

The operation document.write writes content in the open document in question, as expected. But why it works even without running the document.open before? Why make the call to document.write in a closed document produces an implicit call to document.open before executing the operation itself, which explains why the content is overwritten.

Note: The fact of document.write make an implicit call to document.open is not foreseen in the W3C specifications and therefore should not be considered as standard behavior in the browser.

Also note that document.write only makes the implied call to document.open and not to document.close, and the last necessary after executing document.write.

Lifetime of the document

It is interesting to note, too, that the output data stream (output stream) of the current document remains open while the page is loaded and closed when it is fully loaded. One way to test this is to perform the operation document.write before the page is fully loaded, as in the example below.

<!DOCTYPE html>
<html>
  <script>document.write("<h1>StackOverflow em Português</h1>");</script>
  <body>

    <p>Click the button to open an output stream, add some text, and close the output stream.</p>

    <button onclick="myFunction()">Try it</button>

    <script>
      function myFunction() {
        document.open();
        document.close();
      }
    </script>

  </body>
</html>

How the document is opened while loading the page, the operation document.write does not overwrite its content.

2

As Anderson said, the document.open opens a output stream and leaves the browser with that charging signal, waiting for calls from document.write and a document.close to finalize.

To illustrate an example of the use of document.open we can see the use of window.open() and then join with the document.open, document.write and document.close opening a popup and writing inside her.

window.open() opens a popup while window.close() closes the popup. (Do not confuse window with document, one deals with the window and the other of the content, are different things)

html page.

Essa é sua página com botão para abrir janelinha popup. <br>
<br>
<input type="button" onclick="window.open('popup.html','_blank','height=200,width=200,menubar=0,scrollbars=0,toolbar=0')" value="Abrir popup">

popup.html

<h1>Abriu sua popup!</h1>
<input type="button" onclick="window.close()" value="Fechar popup">

The above example is a popup called the default way, but if we want to do a popup without using another page, we could call the document.open, followed by calls from document.write and a document.close.

An example of the use of document.open inside a popup that calls no file and creates the content dynamically.

gerapopup.html

<script>
function gerapopup()
{
    //Abre popup vazio
    var w = window.open('','_blank','height=150,width=450,menubar=0,scrollbars=0,toolbar=0');

    //Escreve na popup
    w.document.open();
    w.document.write("<h1>Popup gerada dinamicamente</h1>");
    w.document.write('<input type="button" onclick="window.close()" value="Fechar popup">');
    w.document.close();
}
</script>

Essa é sua página com botão para abrir janelinha popup. <br>
<br>
<input type="button" onclick="gerapopup()" value="Gerar popup">

Note: For safety reasons popups have fallen out of use but the locally testing of the above code still works satisfactorily.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.