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.

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