Does using "document.open" and "document.close" make any difference?

Navigation
7

I saw in a given response from SOEN a question about how to print iframe content.

I ended up with a snippet 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 this document.close was. So I ended up looking at W3Schools .

Here is an example of using document.open and document.close , like this: 

<!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 with either document.close or without, nothing different happens in the examples (the same goes for document.open ).

See without 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 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, what is the purpose of 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 actually have to use one or the other?

    
asked by anonymous 14.02.2017 / 13:52

2 answers

15

document.open

The document.open operation opens a document for output ( output stream ) and if there is already a document instance in document , its content is 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>

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

document.close

The document.close operation closes the document for writing, inverse process of document.open . Note that if this operation is not performed after document.open , the stream of the document will be opened and the browser itself understands this as if the page was 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>

Notice that the icon in the browser indicates that the page is loading:

Thebrowserstaysthatwayuntilthedocument.closeoperationisdoneorthepagereloaded.

document.write

Thedocument.writeoperationwritesacontentintheopendocumentinquestion,asexpected.Butwhydoesitevenworkwithoutrunningdocument.openbefore?Whycallingthedocument.writeinacloseddocumentproducesanimplicitcalltodocument.openbeforeexecutingtheoperationitself,whichexplainswhythecontentisoverwritten.

  

Note:Thefactthatdocument.writemakesanimplicitcalltodocument.openisnotprovidedforintheW3Cspecificationsandthereforeshouldnotbeconsideredasdefaultbehaviorinthebrowser.

Noticealsothatdocument.writeonlymakestheimplicitcalltodocument.openandnotdocument.close,thelatterbeingrequiredafterexecutingdocument.write.

Documentlifetime

Itisalsoworthnotingthattheoutputstream(outputstream)ofthecurrentdocumentremainsopenwhilethepageloadsandcloseswhenthepageisfullyloaded.Onewaytotestthisistorunthedocument.writeoperationbeforethepageloadscompletely,asintheexamplebelow.

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

Because the document is open while loading the page, the document.write operation does not overwrite its contents.

    
14.02.2017 / 15:01
3

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

  

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

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 with content, are different things)

page.html 

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 popup without using another page, we could call document.open , followed by document.write and document.close .

Below is an example of using document.open within a popup that does not call any files and creates 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 security reasons popups have fallen into disuse but the locally tested code above still works satisfactorily.

    
09.06.2017 / 05:50
How to populate a DropDownList from another DropDownList Type Double and type Decimal