deniscope

Se réveiller après la bataille

Le secret numéro 1 a déjà révélé un comportement étrange après l'événement onload. Le secret numéro 5 n'en est pas moins étonnant. Plantons le décors.

L'histoire se passe après l'événement onload, et c'est l'histoire d'un tag SCRIPT généré et inséré au DOM. L'histoire raconte que le script contenu dans le tag SCRIPT en question n'est pas automatiquement exécuté comme on pourrait s'y attendre.

Regardons de plus près un exemple avec le test 5, pour simplifier il peut se découper en trois étapes:

1. Appel d'une méthode pour mettre un fond rouge
2. L'événement onload appel une méthode
3. La méthode construit un tag SCRIPT qui contient la même méthode que le point 1 mais avec un fond vert

Le test contient deux façons différentes de construire le tag SCRIPT, à gauche en écrivant littéralement le tag dans la propriété innerHTML d'un tag DIV et à droite en utilisant la méthode createElement. Pour résumer, si le carré est vert c'est que le tag SCRIPT a été exécuté, s'il reste rouge c'est qu'il ne l'a pas été.

Et là, que peut-on voir de nos petits yeux, encore embrumés d'une telle découverte, que les résultats sont pour le moins inconstant (voir le récapitulatif BrowserShots sur l'image ci-dessus). Certains navigateurs font très bien leur boulot et obtiennent les deux carrés verts, pendant que d'autres n'en ont qu'un seul voir pas du tout. On peut noter, pour ce secret, une nette différence (ils sont opposés) entre les deux gros concurrents leader du marché, Firefox et Internet Exporer.

Maintenant, quant à expliquer le phénomène, je me contenterais de faire comme pour les autres secrets, c'est à dire de seulement le constater.

Une livre sinon rien

Lorsqu'un navigateur communique avec un serveur, ils utilisent des codes pour être sûr de bien se comprendre. Ces codes sont naturellement les mêmes pour tous et ne permettre guère l'improvisation. Il n'en reste pour autant pas moins qu'une requête HTTP (car c'est bien de cela qu'on parle) peut être constitué d'une entête et de données. En règle général et sauf contre ordre, les navigateurs affiches les données quelques soient le code envoyé.

Pour illustrer ces communications, j'ai créé une petite page test avec les principaux codes HTTP. Comme le montre le détail de la page test ci dessous, chaque code est appelé deux fois. La première fois (à gauche) avec peu de donnée, la seconde (à droite) avec plus de 512 octets de donnée, les deux pages affichant un carré vert.

Alors pourquoi cette limite des 512 octets? Et bien c'est là que réside le secret (et le jeu de mot foireux du titre également). Si vous regardez de plus près le résultat donné par le site broswershots (ci dessus), le navigateur Internet Explorer réagit différemment aux réponses HTTP en fonction du nombre d'octet envoyé. J'avoue que même si vous pouvez cliquer sur l'image des résultats pour zoomer, la chose n'est pas flagrante, c'est pourquoi, dans ma grande mansuétude, j'ajoute une copie d'écran (ci-dessous) d'une partie de la page test sous Internet Explorer. Encore une fois, Internet Explorer se démarque des autres navigateurs par un comportement que je n'arrive pas vraiment à comprendre. Concrètement, Internet Explorer n'interprète les données envoyées seulement si elles sont assez nombreuses...

Vous avez une explication?

Si Champollion m'était conté.

On a tous nos petits secrets, des comportements inavouables que la décence nous fait cacher aux yeux du grand public. Mais voilà, Internet n'est pas constitué seulement du grand public et, immanquablement, tout secret finit par être percé et exploité. Regardons de plus prêt une méthode javascript largement utilisée sur le web: document.write.

Si je me fis à cette documentation en ligne, il est dit:

Do not use the write method or the writeln method on the current document after the document has finished loading unless you first call the open method, which clears the current document window and erases all variables.

Comme je suis taquin, j'ai écrit une petite page pour vérifier cette information. Cette page est constituée de deux pages tests. Chaque page test est constituée d'un gros carré rouge et d'un appel à une méthode qui écrit un gros carré vert. Seul l'appel à cette méthode n'est pas placé au même endroit. Voici le code de la méthode:

 function beGreen(){
     document.write('<div style = "width: 100%; height: 100%; background: green" />');
     document.close();
 }

La première page test appelle la méthode document.write juste après le chargement de la page.

window.onload = beGreen;

L'effet est immédiat, le gros carré vert apparait.

La seconde page test est un peu plus complexe. Le code est également situé dans l'événement onload mais ressemble à ca:

window.onload = function(){    var obj=document.createElement("script");obj.src="onload.js";document.body.appendChild(obj);}

On construit un élément SCRIPT dont la source sera onload.js qui lui contient exclusivement un appel à la méthode beGreen. L'effet n'est pas si immédiat, mais le gros carré vert apparait tout de même, mais... Mais le gros carré vert n'apparait curieusement pas avec tous les navigateurs.

En utilisant l'excellent service en ligne BrowserShots sur la page test, vous obtenez les résultats présentés sur l'image ci-dessus (vous pouvez cliquer sur l'image pour la voir en plus grand). Que passa? Il y a encore du rouge avec les navigateurs Internet Explorer? Pour des raisons qui m'échappent Internet Explorer se refuse à écraser le document sur la seconde page test. Alors pourquoi? Et bien, pour tout dire, je n'en sais rien...