7

Vi em uma determinada resposta do SOEN uma pergunta falando sobre como imprimir o conteúdo de iframe.

Acabei me deparando com um trecho de código onde tinha o seguinte:

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

Fiquei curioso para saber de qual era esse document.close. Aí acabei olhando no W3Schools.

Lá tem um exemplo de uso de document.open e document.close, assim:

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

Porém notei que tanto com document.close ou sem, não acontece nada de diferente nos exemplos (o mesmo vale para document.open).

Veja sem o 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>

Veja sem o 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>

Então, afinal de contas, pra que serve document.open ou document.close?

Eu acho que além de não ter ficado claro pra mim o uso, parece não servir para nada.

Tem algum caso onde eu realmente tenha que usar um ou outro?

2 Respostas 2

15
+50

document.open

A operação document.open abre um documento para a escrita (output stream) e se já houver uma instância de documento em document, seu conteúdo é sobrescrito. Veja abaixo:

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

Perceba que apenas de abrir e fechar o fluxo de dados do documento, todo o conteúdo de document, que por padrão é a própria página, é sobrescrito.

document.close

Já a operação document.close fecha o documento para escrita, processo inverso de document.open. Perceba que se esta operação não for executada após o document.open, a stream do documento ficará aberta e o próprio navegador entende isso como se a página não estivesse pronta.

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

Veja que o ícone no navegador indica que a página está carregando:

inserir a descrição da imagem aqui

O navegador permanece assim até que a operação document.close seja efetuada ou a página recarregada.

document.write

A operação document.write escreve um conteúdo no documento aberto em questão, como era de se esperar. Mas por quê funciona mesmo sem executar o document.open antes? Porquê fazer a chamada ao document.write em um documento fechado produz uma chamada implícita à document.open antes de executar a operação em si, o que explica o porquê do conteúdo ser sobrescrito.

Nota: O fato de document.write fazer uma chamada implícita à document.open não é previsto nas especificações W3C e, portanto, não deve ser considerado como comportamento padrão no navegador.

Perceba também que document.write apenas faz a chamada implícita à document.open e não à document.close, sendo o último necessário após executar document.write.


Tempo de vida do documento

É interessante notar, também, que o fluxo de dados de saída (output stream) do documento atual permanece aberto enquanto a página é carregada e é fechado quando a mesma é completamente carregada. Uma maneira de testar isso é executar a operação document.write antes que a página seja carregada por completo, como no exemplo abaixo.

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

Como o documento está aberto durante o carregamento da página, a operação document.write não sobrescreve seu conteúdo.

2

Como o Anderson falou, o document.open abre um output stream e deixa o browser com aquele sinal de carregando, aguardando chamadas de document.write e um document.close para finalizar.

Para ilustrar um exemplo de uso do document.open podemos ver o uso do window.open() e depois juntar com o document.open, document.write e document.close abrindo uma popup e escrevendo dentro dela.

window.open() faz abrir um popup, enquanto window.close() fecha o popup. (Não confundir window com document, um trata da janela e o outro do conteúdo, são coisas diferentes)

pagina.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">

O exemplo acima é um popup chamado do jeito padrão, mas se quisermos fazer um popup sem usar outra página, poderíamos chamar o document.open, seguido de chamadas de document.write e um document.close.

Segue abaixo agora um exemplo de uso do document.open dentro de uma popup que não chama nenhum arquivo e cria o conteúdo dinamicamente.

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

Nota: Por motivos de segurança popups caíram em desuso mas o teste localmente do código acima ainda funciona satisfatoriamente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .