Javascript Girl
  1. Javascript Girl
  3. Document.head, document.body pour attacher des scripts
Intereting Posts
Javascript: Est-il acceptable d'appeler cleartimeout avant settimeout? Iterating à travers un tableau tout en effectuant une demande pour chaque entrée Solution RTSP pour JavaScript / HTML5 Court délai dans le chargement du style Google Maps Comment passer le "point d'interrogation" dans url javascript Valeur de la propriété de la requête d'une classe css même si elle n'est pas utilisée Javascript window.parent issue Utilisation appropriée de la méthode .on dans Jquery Utilisez les tags de modèle Django dans jQuery / Javascript? Est-ce que getTimezoneOffset () est stable pendant la transition d'été? Existe-t-il un moyen de revenir au début de la promesse différée? Javascript illimité Comment réparer les conflits Prototype avec Highchart? Qu'est-ce qui signifie moz-nullprincipal? Comment utiliser FormData pour le téléchargement de fichier ajax

Document.head, document.body pour attacher des scripts

J'ai souvent utilisé, et j'ai vu des structures d'accès direct recommandées comme ceci pour ajouter du contenu aux pages dynamiquement: 

loader = document.createElement('script'); loader.src = "myurl.js"; document.getElementsByTagName('head')[0].appendChild(loader);

Maintenant, par hasard, je trouve que cela fonctionne dans Google chrome: 

 document.head.appendChild(loader);

Un peu plus d'enquête, et je trouve que cela fonctionne, apparemment cross-browser: 

 document.body.appendChild(loader);

Donc, ma principale question est: Y at-il des raisons pour lesquelles je ne devrais pas attacher des éléments au CORPS comme ça?

De plus, pensez-vous que document.head sera plus largement pris en charge?

Je ne vois aucune raison pour laquelle il importe en pratique si vous insérez vos éléments <script> dans l'élément <head> ou <body> . En théorie, je pense qu'il est agréable d'avoir le DOM d'exécution ressembler à la vraisemblance.

En ce qui concerne document.head , il fait partie de HTML5 et apparemment déjà implémenté dans les dernières versions de tous les principaux navigateurs (voir http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html# Dom-document-head ).

document.body fait partie de la spécification DOM, je ne vois aucun point pourquoi ne pas l'utiliser. Mais soyez conscient de ceci:

Dans les documents contenant du contenu, renvoie l'élément et, dans les documents du cadre, cela renvoie l'élément le plus externe.

(À partir de https://developer.mozilla.org/fr/DOM/document.body )

document.head n'est actuellement pas défini dans une spécification DOM ( apparemment, j'avais tort à ce sujet, voir la réponse de Daniel ), alors vous devriez généralement éviter d'utiliser.

Voir ma réponse sur une question similaire pour une comparaison plus approfondie des options. (C.-à-d. Section / script.appendChild vs. section / script.insertBefore)

J'ai essayé de mettre en œuvre ce code et je me suis heurté à un peu de problème, donc j'ai voulu partager mon expérience.

D'abord, j'ai essayé ceci: 

 <script> loader = document.createElement('script'); loader.src = "script.js"; document.getElementsByTagName('head')[0].appendChild(loader); </script>

Et dans le fichier script.js, j'avais un code tel que le suivant: 

 // This javascript tries to include a special css doc in the html header if windowsize is smaller than my normal conditions. winWidth = document.etElementById() ? document.body.clientWidth : window.innerWidth; if(winWidth <= 1280) { document.write('<link rel="stylesheet" type="text/css" href="style/screen_less_1280x.css">'); }

Le problème est que, lorsque j'ai tout fait, le code ne fonctionnerait pas. Alors qu'il fonctionnait une fois que j'ai remplacé le chargeur de script avec tout simplement ceci: 

 <script src="script.js"></script>

Cela fonctionne pour moi, donc le problème résolu pour l'instant, mais j'aimerais comprendre la différence entre ces deux approches. Pourquoi est-ce que l'on travaille et non l'autre?

De plus, cela se trouve dans script.js J'ai aussi un code tel que: 

 function OpenVideo(VideoSrcURL) { window.location.href="#OpenModal"; document.getElementsByTagName('video')[0].src=VideoSrcURL; document.getElementsByTagName('video')[0].play();}

Et ce code fonctionne bien, peu importe la façon dont je source le script dans mon fichier html.

Donc, mon script de redimensionnement des fenêtres ne fonctionne pas, mais les choses vidéo le font. Par conséquent, je me demande si la différence de comportement a trait à l'objet "document" …? Peut-être que "document" fait référence au fichier script.js au lieu du fichier html.

Je ne sais pas. Je pensais que je devrais partager cette question au cas où cela s'appliquerait à quelqu'un d'autre.

À votre santé.

Les réponses fournies jusqu'à maintenant se concentrent sur deux aspects différents et sont à la fois très utiles.

Si la portabilité est une exigence pour vous, dans des documents qui ne dépendent pas de votre propriété, où vous ne pouvez pas contrôler la cohérence des DOM, il peut être utile de vérifier l'existence de l'élément auquel vous devez annexer le script; De cette façon, cela fonctionnera également lorsque la section HEAD n'a pas été créée explicitement: 

 var script = document.createElement('script'); var parent = document.getElementsByTagName('head').item(0) || document.documentElement; parent.appendChild(script);