3

Quando document.writeln() usado para mostrar texto no html está em desuso? Alguém conhece outra forma de mostra uma string na tela?

Segue o xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">     
<head> 
    <title> JavaScript Objeto String</title>    

    <script type = "text/javascript" src = "js/ObjetoString.js"> </script> 

</head>    
<body>    

</body>
</html>

Segue o javascript

var x = new String("Texto dentro de aspas é string");

document.writeln();  

Error na saida

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

9
  • você quer adicionar um conteúdo sem apagar a página, é isso? 4/04/2016 às 22:18
  • Não, quero mostra o valor da string "x" na tela apenas isso. Mas ta aparecendo o error acima, q diz que nao está mais em uso ..
    – Jose.Lemo
    4/04/2016 às 22:20
  • qual navegador vc está usando? No firefox funcionou sem problema. 4/04/2016 às 22:26
  • No meu nao funciona estou usando Firefox com o Firebug
    – Jose.Lemo
    4/04/2016 às 22:27
  • 1
    Inventar uma interpretação nova pra mensagem de erro não vai ajudar em nada. Provavelmente tem algum erro básico de sintaxe no seu código, e o erro que está tendo é um efeito colateral. Além disso, melhor não inventar moda e fazer var x = "String é um texto dentro de aspas ";, se estiver fazendo uma aplicação convencional.
    – Largato
    5/04/2016 às 0:30

4 Respostas 4

4

Não o document.write ou document.writeln não estão em desuso, eu testei o script e ele não faz nada e também não apresenta erro algum. Então fiz assim:

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JavaScript Objeto String</title>
        <script type="text/javascript" src="arquivo.js"></script>
    </head>
    <body>
        <p>test</p>
    </body>
</html>

arquivo.js:

var x = new String("Texto dentro de aspas é string");
document.writeln(x);

Apenas no IE11 aparece um erro:

HTML1514: Extra "<body>" tag found. Only one "<body>" tag should exist per document.

Mas esse erro não é de Javascript e sim de HTML, quando usa document.write antes do body sem uma tag valida para <head> o IE automaticamente cria o <BODY>, mas logo em seguida ele encontra outro <body> (definido por você) e isso causa um conflito (irei explicar como evitar).

Provavelmente o erro:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

É ocasionado por outro script e você fez alguma confusão (vou falar do erro InvalidStateError a seguir).

O que são document.write e document.writeln

O document.write é usado pra "escrever" no documento, mas não pra manipular o DOM "dinamicamente" e nem de maneira assíncrona, isso quer dizer que se você executar document.write dentro de <head> assim:

<head>
<script>
document.write("Teste");
</script>
</head>

Seria o mesmo que escrever isso:

<head>
Teste
</head>

Ou seja isso não vai inserir dentro do BODY (aonde provavelmente é o seu objetivo), você só deve usar document.write em head se pretende inserir uma tag valida pra <head>, por exemplo digamos que você quer inserir um javascript sem e prevenir o cache dele, você pode fazer assim:

<head>
<script>
var time = new Date().getTime();
document.write('<script src="file.js?_=' + time + '"></script>');
</script>
</head>

Ou então quer mostrar a data no título:

<head>
<script>
var minhaData = new Date();
document.write('<title>' + minhaData + '</title>');
</script>
</head>

São apenas exemplos e não que realmente você deve usar

O que importa é entender que dentro de <head> só pode haver tags validas, mesmo que o conteúdo seja inserido por document.write.

O document.writeln é quase idêntico ao document.write, a unica diferença é que ele gera uma quebra de linha no final da string inserida, seria quase o mesmo que:

document.write("Foo bar\n");

document.write em eventos

O document.write se usado em eventos como click ou onload não irá adicionar apenas conteudo, ele irá sobrescrever o <body></body> existente, por exemplo:

document.getElementById("testar").onclick = function() {
    document.write("Olá mundo!");
};
<p>test</p>

<button id="testar">Testar</button>

O document.write fora de eventos e antes do documento ser processado não sobrescreve apenas insere, mas depois de processado ele necessita reconstruir a estrutura e pra isso precisa limpar primeiro todo <body>, raramente você vai usar algo desta maneira (como no exemplo acima).

Como inserir conteúdo na página dinamicamente

Pra evitar limpar o body você tem várias opções, como .innerHTML, .appendChild, .insertBefore

Um exemplo com innerHTML:

var conteudo = document.getElementById("conteudo");

document.getElementById("testar").onclick = function() {
    conteudo.innerHTML = "Olá mundo! Data atual: " + (new Date());
};
<p>test</p>

<div id="conteudo"></div>

<button id="testar">Testar</button>

O erro InvalidStateError

Aparentemente esse problema ocorre em requisições Ajax, ou em certas manipulações DOM o qual o objeto "mudou" ou não existe, a situação é bem variante, mas um exemplo que o problema ocorre é quando tentamos setar um header no XMLHttpRequest antes do .open, isso apresenta o erro:

var xhr = new XMLHttpRequest();
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );

Pra corrigir faça isto:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'pagina.html', true);
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );

Recomendo que estude e aprenda como funciona eventos/callbacks, recomendo estas duas respostas:

XHTML e HTML5

Notei que o seu código usa XHTML, eu não vejo necessidade disso em páginas padrões ou básicas, a não ser que você vá trabalhar com alguma estrutura de XML dentro da estrutura do HTML, todavia recomendo começar a usar HTML5, ou se quiser ainda sim continuar usando o DTD STRICT então use o HTML4.01, na maior parte dos casos você não vai usar o XHTML.

Um exemplo de HTML4.01 com strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Teste</title>
</head>
<body>
    <p>Olá mundo</p>
</body>
</html>

HTML5:

<!DOCTYPE html>
<html>
<head>
    <title>Teste</title>
</head>
<body>
    <p>Olá mundo</p>
</body>
</html>

E pra validar o seu HTML você pode usar este link https://validator.w3.org

3

<script>
    var imprime_1 = function(){
        document.writeln("Valor");
    }
    var imprime_2 = function(){
        var x = new String("var String");
        document.writeln(x);
    }
</script>
<form>
  <input type="button" value='ação1' onclick="imprime_1()">
  <input type="button" value='ação2' onclick="imprime_2()">
</form>

5
  • Não ta funcionando aq. Apareceu erro de sintaxe e nao conseguir descobri. olha o erro: SyntaxError: expected expression, got '<'
    – Jose.Lemo
    4/04/2016 às 22:39
  • @Jose.Lemo tente ver qual desses vai funcionar, de preferencia não copie o código para um arquivo, execute aqui mesmo 4/04/2016 às 22:45
  • Infelizmente só da certo executando aqui, mas no meu arquivo nao dá, ..
    – Jose.Lemo
    4/04/2016 às 22:49
  • tenta rodar no chrome, opera, pode ser que o seu browser esteja com problema, ou se vc estiver usando uma IDE online, pode ser esse o problema, evite usar IDEs online para fazer seus códigos, já vi muitos problemas que dão dor de cabeça. 4/04/2016 às 22:51
  • Não dá certo Bruno. Mesmo vlw pela ajuda. Na verdade este comando está em desuso. mesmo erro: InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable document.writeln(x);
    – Jose.Lemo
    4/04/2016 às 22:57
2

Bem não sei qual o seu OS ou Navegador você esta usando pois testei no IE 11, FF (atualizado), Chorme (atualizado), Edge e Opera (atualizados também) no Windows 10 (64 bits) e todos funcionam, então acredito que o problema seja esse, seu Navegador e OS.

De qualquer forma o comando document.writeln não esta em desuso, nem nunca esteve pois até onde eu saiba não existe nenhum comando parecido a esse no JavaScript o mais proximo seria o innerHTML mas ele seria manipulação de elementos (DOM) e não escrita na tela, o que pode ocorrer é que PARECE segundo as documentações que existem incompatibilidade dessa tag com documentos XHTML como descrito aqui W3C XHTML FAQ, mas sinceramente nunca presenciei esse tipo de coisa.

Até porque a diferença do document.writeln para o document.write é minina a única coisa é que a primera dá quebra de linha como se fosse um "enter" ou também como um "\r\n" que na tradução fica:

\r = Carriage return 
\n = New line

E que pode váriar sua interpretação para cada OS que seria leia esse comando, pois dependendo da combinação pode adicionar ou faltar "enters":

  • Mac: \r
  • Linux/Unix: \n
  • Windows: \r\n

O que está em desuso mas não obsoleto é iniciar o construtor como new String(""), que também são conhecidas como "String objetos" pois isso é mais comum no Java, no JavaScript ele é bem permicivo e fracamente tipado, então entro desuso sendo mais comum usar a "String primitivas", até porque existe muito pouca últilidade de ser fazer isso no JavaScript, ele serve mais para aramzenar uma cadeia de valores.

var var1 = "Texto 1";
var1.prop = "Texto 2";
alert(var1.prop); // undefined

var var1 = new String("Texto 1");
var1.prop = "Texto 2";
alert(var1.prop); // "Texto 2" 
1
  • Estou usando a versao 45.0.1 (x86 pt-br), windows 8.1. Estou fazendo esses exemplo da XTI: youtube.com/…
    – Jose.Lemo
    6/04/2016 às 0:32
1

O comando document.writeln(linha), não está em desuso, ele escreve uma linha onde o comando foi especificado, todo o xml pode ser sobrescrito se estiver fora fora das tags html.

Observe o código abaixo tirado do site http://www.w3schools.com/jsref/met_doc_writeln.asp

Acesse para mais informações sobre document.writeln().

<body>

 <p>Note that write() does NOT add a new line after each statement:</p>

 <pre>
 <script>
  document.write("Hello World!");
  document.write("Have a nice day!");
 </script>
 </pre>

 <p>Note that writeln() add a new line after each statement:</p>

 <pre>
 <script>
  document.writeln("Hello World!");
  document.writeln("Have a nice day!");
 </script>
 </pre>

</body>

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 .