Comment contourner les limitations de document.write() lors du chargement de scripts asynchrones ?

Chargement de scripts asynchrones : comprendre les limitations de document.write()

Lors de l'exécution de scripts de manière asynchrone, après le chargement initial de la page, il est essentiel d'être conscient des limites que cela pose à la manipulation de documents. Comme indiqué dans le message de la console : "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 signifie que l'utilisation de document.write() dans un tel script externe les scripts chargés n'écriveront pas efficacement dans le document, même si le script lui-même se charge correctement. La raison réside dans le fait que les scripts asynchrones s'exécutent après l'analyse et la fermeture du document.

Pour résoudre ce problème, il est nécessaire de remplacer document.write() par des manipulations explicites du DOM. Au lieu d'écrire directement dans le document, créez les éléments DOM souhaités et ajoutez-les au document à l'aide de méthodes telles que appendChild(), insertBefore() ou en définissant la propriété innerHTML.

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

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

Dans un script chargé dynamiquement, remplacez-le par ce qui suit :

var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);

Alternativement, s'il n'y a aucun autre contenu dans le conteneur , vous pouvez définir directement la propriété innerHTML :

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

En suivant ces directives, vous pouvez manipuler efficacement le DOM à partir de scripts chargés de manière asynchrone sans rencontrer l'erreur « Échec de l'exécution de 'write' sur 'Document' ».

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!