Comment gérer l'échec d'exécution de l'écriture d'un document après le chargement d'un script asynchrone ?

Échec d'exécution de l'écriture du document après le chargement asynchrone du script

Lors du chargement d'un script de manière asynchrone, le script chargé s'exécute une fois que le document a été complètement analysé et fermé. Cette limitation empêche l'utilisation de document.write() depuis le script chargé.

Raison de l'erreur

Le message d'erreur "Il n'est pas possible d'écrire dans un document à partir d'un script externe chargé de manière asynchrone" indique que la tentative d'écriture dans le document à l'aide de document.write() a échoué car le script a été chargé après la fermeture du document.

Manipulation alternative du DOM

Pour résoudre ce problème, vous devrez remplacer toutes les instructions document.write() par une manipulation explicite du DOM. Cela implique de créer des éléments DOM et de les insérer dans un élément parent à l'aide de méthodes telles que :

• .appendChild()
• .insertBefore()
• .innerHTML

Exemple

Par exemple, au lieu d'utiliser document.write() dans un script en ligne comme suit :

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

Vous utiliseriez le code suivant dans un script chargé dynamiquement :

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

Vous pouvez également définir le innerHTML du conteneur :

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

En remplaçant les instructions document.write() par ces manipulations DOM alternatives techniques, vous pouvez garantir l'exécution réussie de vos scripts chargés de manière asynchrone tout en réalisant les modifications de document souhaitées.

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!