web-dev-qa-db-fra.com

document.write () écrasant le document?

Ce:

function myFunction()
{
    document.write("sup");
}

appelé en html comme:

<div id="myDiv">
    <script>myFunction();</script>
</div>t

ajoute une chaîne sup à l'élément myDiv div. C'est exactement ce que je veux. Cependant, ceci:

function loadFile(uri)
{
    var r = new XMLHttpRequest();
    document.write("trying to open: " + uri);
    r.open('GET', uri, true);
    r.send(null);
    r.onreadystatechange = function()
    {
        if (r.readyState == 4)
        {
            myFunction();
        }
    }
}

function myFunction()
{
    document.write("sup");
}

appelé comme ceci:

<div id="myDiv">
    <script>loadFile("filename.txt");</script>
</div>

semble écraser tout mon fichier html. C'est à dire. lorsque je l'exécute dans Firefox, il ne me montre que la chaîne sup (c'est tout le contenu de la page) mais la page semble toujours en cours de chargement (l'icône de chargement de FF est toujours là animée, apparemment à l'infini).

Tout d'abord, cela ne sera utilisé que localement, hors ligne, comme un moyen rapide et pratique de présenter les données (en utilisant html + js et un navigateur Web au lieu de plaer un fichier texte). Ce que je veux, c'est charger un fichier texte local, puis mettre une partie de son contenu dans le cadre de la page html. La même chose que dans mon premier exemple mais avec le chargement du fichier texte en premier.

javascripthtmlxmlhttprequestdocument.write
20
NPS

Le problème est que lorsque vous exécutez document.write après le chargement du document, il écrase tout le document. S'il est exécuté avant cela, il ne le remplace pas.

Ce que vous voulez faire, c'est définir le innerHtml d'un élément spécifique, quelque chose comme:

document.getElementById("myDiv").innerHTML="Sup";
25
dave

Voyons ce que fait un navigateur lorsqu'il reçoit un fichier html.

  1. Le document de fenêtre est ouvert pour l'écriture. Imaginez ouvrir un fichier texte.
  2. Le navigateur écrit le contenu dans le document. Beaucoup de magie se produit dans cette étape - les objets sont créés et rendus html sous forme de boîtes.
  3. Le document de fenêtre ferme le document. Un peu comme enregistrer le fichier texte.

Désormais, les navigateurs modernes exposent également une API de document qui vous permet d'effectuer exactement ces tâches à l'aide de javascript.

Vous pouvez ouvrir un document pour l'écriture en utilisant document.open(). Vous pouvez également commencer à écrire du contenu dans le document à l'aide de document.write(). Enfin, vous pouvez fermer le document pour l'écriture en utilisant document.close(). Étant donné que le document doit toujours être ouvert pour l'écriture avant d'écrire, l'appel de document.write() entraîne toujours un document.open() implicite .

Les appels entrecoupés document.write() dans un corps html sont une technique couramment utilisée pour insérer dynamiquement le contenu d'une chaîne dans une page html.

Par exemple, si vous exécutez document.write("<p>holla</p>") dans le corps d'un fichier html, le navigateur procédera comme suit lors de la réception du fichier html.

  1. Ouvrez le document pour l'écriture.
  2. Commencez à écrire le contenu html dans le document.
    • Le moteur JavaScript exécutera document.write() lorsqu'il le rencontrera, puis écrira "<p>holla</p>" Dans cette ligne spécifique du document, comme si la chaîne faisait déjà partie du fichier html! Puisque document.write() est appelé pendant l'analyse d'un fichier html, il est simplement analysé dans le cadre de la page.
  3. Fermez le document pour l'écriture. Analyse complète.

Si c'est ainsi que vous utilisez document.write(), il n'y aurait pas eu de surprise. Au lieu de cela, vous appelez document.write()après le html est analysé.

Alors, que pensez-vous qu'il devrait se passer?

Comme je l'ai mentionné précédemment, un document doit être ouvert pour être écrit avant d'être écrit dans . En théorie, nous pourrions soit ajouter au contenu existant ou simplement l'écraser. Eh bien, si nous ajoutons au contenu, nous nous retrouverons avec un page html non valide parce que les nouvelles valeurs apparaîtront après les balises de fermeture. Donc, le comportement le plus sensé est d'écraser le contenu et c'est exactement ce qui se passe.

20
linstantnoodles