Javascript Girl
  1. Javascript Girl
  3. Comment avoir un script dans le script <head> ajouter à la fin du <corps>
Intereting Posts
JavaScript Split Common Expression garde le délimiteur Comment filtrer un objet JSON multidimensionnel avec jQuery.grep () Dialogues modaux de Jquery UI Qu'est-ce que document.all signifie? Jeu de simulation de couleur Javascript JQuery – En-tête collant qui se rétrécit lors du défilement vers le bas Comportement des polygones en Javascript Accéder aux éléments DOM via l'extension chrome Iterating sur chaque propriété d'un objet dans javascript en utilisant Prototype? Est-il possible de déterminer quand un élément a été rendu avec JavaScript? IE6: événement de chargement d'arrière-plan JS Orientation Exif du côté client: faire pivoter et miroir des images JPEG Mise au point / upsert de Mongoose? JQuery, pourquoi le retournement reproducteur ne fonctionne pas? Bypass IE "La page Web que vous visualisez …" pop up

Comment avoir un script dans le script <head> ajouter à la fin du <corps>

Un client utilise Sharetribe qui vous permet d'ajouter JS personnalisé via admin, mais seulement dans la tête. Je veux que mon script se charge après jQuery, mais jQuery est chargé à la fin du corps. Comment puis-je écrire de vanilla JS qui ajoute mon script principal à la fin une fois que la documentation est chargée?

J'ai essayé ceci: 

<script> var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://cdn..."; document.body.appendChild(script); var script2 = document.createElement("script"); script2.type = "text/javascript"; script2.text = "$(SOME.CODE.HERE);" document.body.appendChild(script2); </script>

Mais il est exécuté avant que le document ne soit fini de charger (et en particulier, avant que jQuery soit disponible). La seule chose que je peux penser est de définir une minuterie, mais cela semble buggy.

Aucun conseil?

Utilisez l'événement DOMContentLoaded :

L'événement DOMContentLoaded est déclenché lorsque le document a été complètement chargé et analysé, sans attendre les feuilles de style, les images et les sous-trames pour terminer le chargement (l'événement de chargement peut être utilisé pour détecter une page entièrement chargée). 

 document.addEventListener("DOMContentLoaded", function (event) { console.log("DOM fully loaded and parsed"); // Your code here });

DOMContentLoaded est identique à ready event of jQuery .

Documentation

Dites à votre code d'attendre que le DOM termine son chargement: 

 window.onload = function() { var script = document.createElement("script"); script.type = "text/javascript"; //.... }

Ou en utilisant jQuery: 

 $(document).ready(function() { var script = document.createElement("script"); script.type = "text/javascript"; //.... });

Comme vous attendez que jQuery charge, vous pouvez simplement envelopper votre code dans la méthode $(document).ready() jQuery: 

 $(document).ready(function() { // Your code here. });

Une page ne peut pas être manipulée en toute sécurité jusqu'à ce que le document soit "prêt". JQuery détecte cet état de préparation pour vous. Le code inclus à l'intérieur de $( document ).ready() ne fonctionnera que lorsque la page Document Object Model (DOM) est prête pour le code JavaScript à exécuter.

Je me rends compte que vous avez mentionné que vous voulez cela dans "vanilla" JS, mais comme vous attendez que jQuery soit chargé de toute façon, cela semble un peu redondant.

Lorsque le navigateur exécute votre code dans <head> , l'élément <body> n'a pas encore existé. Donc, document.body était null .

Pour créer un script à l'élément <body> , utilisez l'événement 'charger' du document , par exemple: 

 ............. document.addEventListener('load', function(event){ var script = document.createElement('script'); ............... document.body.appendChild(script); }, false); ............

$(document).ready(){} est exécuté lorsque votre élément dom est exécuté avec succès.