2010-07-13 6 views
3

Considérons le script ..javascript - erreur document.write?

<html> 
<head> 
    <script type="text/javascript"> 
     document.write('TEST'); 
    </script> 
</head> 

<body> 
    Some body content ... 
</body> 

</html> 

Cela fonctionne bien et le mot 'TEST' est ajouté à la <body>

Mais quand

<script type="text/javascript"> 
    window.onload = function(){ 
     document.write('TEST'); 
    } 
</script> 

est utilisé, le contenu du corps est entièrement remplacé par le mot «TEST», c'est-à-dire que le contenu de l'ancien corps est supprimé et que seul le mot «TEST» est ajouté.

Cela se produit uniquement lorsque document.write est appelé au sein de la fonction window.onload

J'ai essayé en chrome. Y a-t-il une erreur de ma part? Aucune suggestion ?

Répondre

9

document.write() est instable si vous l'utilisez après la fin de l'analyse et de la fermeture du document. Le comportement est imprévisible cross-browser et vous ne devriez pas l'utiliser du tout. Manipulez le DOM en utilisant innerHTML ou createElement/createTextNode à la place.

De l'Mozilla documentation:

L'écriture dans un document qui a déjà été chargé sans appeler document.open() effectue automatiquement un appel document.open. Une fois que vous avez fini d'écrire, il est recommandé d'appeler document.close(), pour indiquer au navigateur de terminer le chargement de la page. Le texte que vous écrivez est analysé dans le modèle de structure du document. Dans l'exemple ci-dessus, l'élément h1 devient un noeud dans le document.

Si l'appel document.write() est directement intégré dans le code HTML, il n'appelle pas document.open().

Le code DOM équivalent serait:

window.onload = function(){ 
    var tNode = document.createTextNode("TEST"); 
    document.body.appendChild(tNode); 
} 
1
  1. dans le premier cas le mot est écrit dans le corps .. il est écrit dans la tête
  2. le premier fonctionne parce que le document est toujours ouvert pour l'écriture .. une fois qu'il a terminé (DOM chargé) le document est fermé, et en essayant d'écrire à celui-ci vous le remplacez.
0

Lorsque le document est entièrement chargé, tout autre appel au document.write() remplacera le contenu du document. Vous devez utiliser document.close() avant d'appeler le document.write() pour éviter l'écrasement.

0

Créez d'abord un élément, par exemple un div, pour ajouter du contenu à la div avec l'événement window.onload.

document.write('<div id="afterpostcontent"><\/div>'); 
window.onload = function() 
{ 
    document.getElementById('afterpostcontent').innerHTML = '<span>TEST<\/span>'; 
} 

Vous pouvez créer un fichier JavaScript externe avec ce contenu et il suffit d'appeler partout, par exemple:

<script src="afterpostcontentcode.js"></script>