Comprendre document.write() en JavaScript

S'il est bien une m�thode m�connue en JavaScript, c'est la m�thode write() de l'objet document.

La syntaxe est pourtant simple :

Code:

document.write(arg1, arg2, ..., argn);

Les arguments attendus sont des cha�nes de caract�res (ou tout du moins des arguments poss�dant une m�thode toString()).
Vous noterez au passage que le nombre de param�tres que l'on peut passer � cette m�thode est ind�termin�.
L'instruction pr�c�dente aura pour effet d'ajouter la valeur de chaque param�tre dans la page.
Par exemple

Code:

document.write('toto', 12, [1,2,3]);

affichera :

Citation:

toto121,2,3

Notez que chaque argument est ajout� � la suite du pr�c�dent sans ins�rer de s�parateur.
Malgr� tout, certaines valeurs affichent un r�sultat inattendu :

Code:

document.write(false, {toto: 'tata', foo: 'bar'});

affichera :

Citation:

false[object Object]

c'est-�-dire qu'un bool�en ne sera pas transform� en 0 ou 1 mais en false ou true et un objet affichera (en fonction du navigateur) [object Object].

Jusque l�, rien de vraiment compliqu� � comprendre, d'autant que l'on passe habituellement un seul param�tre correspondant � une cha�ne � afficher.

Cependant, le comportement de cette m�thode d�pend de l'�tat du document au moment de son appel.
En effet, un document HTML peut avoir deux �tats distincts : ouvert ou ferm�.
Lorsque le navigateur re�oit un contenu HTML � afficher, il commence par ouvrir un document (le flux) puis interpr�te le code HTML en affichant son contenu et en construisant le DOM et une fois l'int�gralit� du code interpr�t�, il ferme le document.
Pendant que le document est ouvert, si le navigateur rencontre une instruction JavaScript write(), alors ses arguments sont ins�r�s � l'emplacement de cette instruction dans le code.
C'est le comportement attendu de cette m�thode.
Mais il faut savoir que document.write() a besoin que le document soit ouvert pour pouvoir fonctionner correctement. Que se passe-t-il alors si le document est ferm� ?
Dans ce cas, JavaScript va appeler en interne l'instruction document.open() puis ex�cuter le write().
Or document.open() correspond � l'ouverture du flux d'affichage, ce qui signifie que l'appel � cette m�thode va recr�er un nouveau flux, en commen�ant par supprimer l'existant.
Pour vous en convaincre, ouvrez une console JavaScript (par exemple Firebug pour Firefox) et dans la ligne de commande, tapez l'instruction

Code:

document.open();

et vous constaterez que la page va devenir blanche. Au passage, vous noterez aussi que l'indicateur de chargement se met en place (� la place du favicon), ce qui est le cas lorsque le flux est ouvert.
De la m�me mani�re, si vous entrez

Code:

document.write('Hello world !');

dans la console, vous constaterez que l'ensemble du contenu a �t� remplac� par le message "Hello world !". Vous pourrez aussi v�rifier que l'indicateur de chargement est toujours actif : le document n'a pas �t� referm�.
Si ensuite vous entrez l'instruction

Code:

document.close();

dans la console, l'indicateur de chargement disparaitra au profit du favicon par d�faut.

La premi�re impression que l'on pourrait avoir en comprenant ce fonctionnement serait de se dire qu'il faut effectivement faire attention au contexte avant d'utiliser cette m�thode.
En fait, il faut surtout consid�rer write() comme une m�thode � bannir.
D�j�, parce qu'une m�thode dont on ne peut garantir le comportement n'est pas � recommander.
Ensuite, parce que les bonnes pratiques en d�veloppement Web pr�conisent de s�parer les couches : HTML pour l'affichage, CSS pour la mise en forme et JavaScript pour le comportement : utiliser la m�thode write() implique d'introduire au niveau de l'affichage du JavaScript qui n'a rien � y faire, surtout que pour manipuler le document, de nombreuses m�thodes du DOM sont disponibles et beaucoup plus fiables.
On pourrait aussi �voquer le fait que l'utilisation de write() interdit l'acc�s aux informations � ceux qui, pour une raison quelconque, ont JavaScript d�sactiv�. Mais surtout, son utilisation (et son existence) force les navigateurs � une pratique particuli�rement d�sagr�able et dommageable qui est le chargement des scripts de fa�on synchrone.
En effet, l'affichage de la page doit �tre garantit par le navigateur, or si un script poss�de une instruction write(), alors il est important de pouvoir pr�voir de fa�on certaine � quel endroit du document ses param�tres seront affich�s, c'est pour cela que les navigateurs bloquent l'interpr�tation de la page pendant le chargement et l'�valuation des scripts (� la diff�rence des autres �l�ments de la page, comme les images ou les iframes) ce qui retarde d'autant l'affichage du reste du contenu.

Billet original publi� sur les blogs de developpez.com...