web-dev-qa-db-fra.com

Exécuter l'écriture sur la documentation: 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.

J'essaie de charger un certain script après le chargement de la page, comme ceci:

function downloadJSAtOnload(){
            var element = document.createElement("script");
            element.src = "scriptSrc";
            document.body.appendChild(element);
        }

         if (window.addEventListener)
                  window.addEventListener("load", downloadJSAtOnload, false);
            else if (window.attachEvent)
                  window.attachEvent("onload", downloadJSAtOnload);
            else window.onload = downloadJSAtOnload;

Et alors que ce script semble exécuter et télécharger 'scriptSrc', et l'ajouter juste avant la fin de la balise body, il génère le message suivant (pas une erreur) dans la console (chrome)

Échec de l'exécution de 'write' sur 'Document': il est impossible d'écrire dans un document à partir d'un script externe chargé de manière asynchrone, à moins que ce script ne soit explicitement ouvert.

Qu'est-ce que cela signifie même? Et suis-je censé faire quelque chose différemment? Même si j'obtiens le comportement attendu?

javascriptasynchronousonloaddocument.write
63
Parijat Kalia

Un script chargé de manière asynchrone va probablement s'exécuter APRÈS que le document ait été entièrement analysé et fermé. Ainsi, vous ne pouvez pas utiliser document.write() à partir d'un tel script (techniquement, vous le pouvez, mais cela ne fera pas ce que vous voulez).

Vous devez remplacer toutes les instructions document.write() de ce script par des manipulations DOM explicites en créant les éléments DOM, puis en les insérant dans un parent particulier avec .appendChild() ou .insertBefore() ou en définissant .innerHTML ou un mécanisme quelconque. pour une manipulation directe du DOM comme ça.

Par exemple, au lieu de ce type de code dans un script en ligne:

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

Vous utiliseriez ceci pour remplacer le script en ligne ci-dessus dans un script chargé dynamiquement:

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

Ou, s'il n'y avait pas d'autre contenu dans le conteneur que vous deviez simplement ajouter, vous pouvez simplement faire ceci:

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

Un peu tard pour la fête, mais Krux a créé un script appelé Postscribe . Nous avons pu utiliser cela pour résoudre ce problème.

22
the0ther

Dans le cas où cela serait utile à quiconque, j'ai eu le même problème. J'apportais un pied de page dans une page Web via jQuery. À l'intérieur de ce pied de page se trouvaient des scripts Google pour les annonces et le reciblage. J'ai dû déplacer ces scripts du pied de page et les placer directement dans la page, ce qui a éliminé la notification.

2
mediaguru