Pourquoi ne pouvez-vous pas exécuter l'écriture sur des documents avec des scripts chargés de manière asynchrone ?

Exécuter l'écriture sur le document : quel est le problème avec les scripts chargés de manière asynchrone ?

Lorsque vous travaillez avec des scripts chargés de manière asynchrone, vous pouvez rencontrer le erreur "Échec de l'exécution de 'write' sur le document. Il n'est pas possible d'écrire dans un document à partir d'un script externe chargé de manière asynchrone à moins qu'il ne soit explicitement ouvert." Cela se produit parce que les scripts asynchrones se chargent une fois que le document a été entièrement analysé et fermé, ce qui rend les modifications directes du DOM à l'aide de fonctions telles que document.write() inefficaces.

Comprendre la solution

Pour résoudre ce problème, vous devez remplacer document.write() par des manipulations explicites du DOM. Au lieu de compter sur l'insertion automatique de contenu, vous devez créer manuellement des éléments DOM et les insérer de manière appropriée.

Exemple

Considérez le script en ligne suivant qui insère un Texte "Bonjour" dans un div "conteneur" :

<code class="html"><div id="container">
<script>
document.write('<span style="color:red">Hello</span>');
</script>
</div></code>

Pour effectuer la même action avec un script chargé de manière asynchrone, vous devez remplacer le script en ligne par le code suivant :

<code class="javascript">var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);</code>

Alternativement, si le conteneur n'a pas d'autre contenu, vous pouvez simplement écraser son HTML interne :

<code class="javascript">var container = document.getElementById("container");
container.innerHTML = '<span style="color:red;">Hello</span>';</code>

En adoptant des manipulations DOM explicites, vous pouvez garantir que vos scripts chargés de manière asynchrone interagissent efficacement avec le document, en évitant les limitations imposées par l'exécution retardée du script.

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!