Pourquoi document.write() efface-t-il la page ?

Pourquoi Document.write efface-t-il la page ?

Lors de l'utilisation de la méthode document.write() en JavaScript, les programmeurs rencontrent souvent un problème particulier comportement : l'invocation de document.write() dans un gestionnaire d'événements, tel que onClick, peut entraîner l'effacement du document.

Pour comprendre ce résultat inattendu, il est essentiel de saisir la nature de document.write(). Cette fonction écrit dans le flux de documents, qui est le flux continu de données représentant le document affiché dans le navigateur.

Dans l'exemple de code fourni :

<code class="html"><form name="myForm">
    <input type="checkbox" name="thebox" />
    <input type="button" onClick="validator()" name="validation" value="Press me for validation" />
</form>

<script type="text/javascript">
    function validator() {
        if (document.myForm.thebox.checked) {
            document.write("checkBox is checked");
        } else {
            document.write("checkBox is NOT checked");
        }
    }
</script></code>

La fonction validator() est déclenché lorsque le bouton "validation" est cliqué. Voici ce qui se passe :

1. À ce stade, le chargement du document est probablement terminé, ce qui signifie que le flux du document est fermé.
2. L'appel de document.write() déclenche automatiquement document.open( ), qui efface le document actuel, supprimant tous les éléments existants.
3. Par la suite, le texte spécifié dans document.write() est rendu dans le document désormais vide.

Par conséquent, les éléments du formulaire (case à cocher et bouton) sont supprimés de la page car l'ensemble du document est actualisé, remplaçant le contenu précédent par la sortie de document.write().

Par conséquent, lorsque vous travaillez avec document.write() , il est crucial de s'assurer que le flux de documents reste ouvert en utilisant explicitement document.open() avant d'y écrire. Sinon, le comportement imprévisible de la suppression du document peut perturber la fonctionnalité prévue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!