web-dev-qa-db-fra.com

Insertion d'un script et d'une balise de lien dans la balise d'en-tête

Est-il possible d'insérer/générer les balises <Script> et <Link> dans le <Header> en utilisant seulement Javascript ou DOM ( pas JQuery ) lors du chargement de la page ou en insérant simplement une balise <Script> dans le <Header> et le faire à partir de là? Et nous permettrait tout de même de le déboguer et d’éviter les doublons si nous ajoutions déjà un <Script> ou un <Link> similaire dans le <Header>?

Par exemple:

Avant

<Header>
   <script src="Scripts/Generate.js" type="text/javascript"></script>
</Header>

Après

<Header>
   <script src="Scripts/Generate.js" type="text/javascript"></script>
   <script src="Scripts/Script1.js" type="text/javascript"></script>
   <script src="Scripts/Script2.js" type="text/javascript"></script>
   <link href="CSS/Css1.css" rel="stylesheet" type="text/css" />
   <link href="CSS/Css2.css" rel="stylesheet" type="text/css" />
</Header>

Tout conseil ou réponse m'aiderait.

javascriptdom
15
Chris N.P.

HTML:

<head>
    <script src="Scripts/Generate.js"></script>
</head>

Scripts/Generate.js:

if(!document.getElementById('id1')) {
    var script = document.createElement('script');
    script.id = 'id1';
    script.src = 'Scripts/Script1.js';
    document.head.appendChild(script);
}
if(!document.getElementById('id2')) {
    var link = document.createElement('link');
    link.id = 'id2';
    link.rel = 'stylesheet';
    link.href = 'CSS/Css1.cs';
    document.head.appendChild(link);
}

Ensuite, le code HTML est:

 <head>
    <script src="Scripts/Generate.js"></script>
    <script id="id1" src="Scripts/Script1.js"></script>
    <link id="id2" rel="stylesheet" href="CSS/Css1.cs">
</head>
27
Paul Draper

Je suppose que "dupliquer" signifie avoir la même valeur d'attribut src. Notez que cela empêchera uniquement l'ajout d'un doublon par le script, il doit donc être exécuté après l'ajout de tous les autres scripts:

function conditionallyAddBySource(tagName, src) {

  tagName = tagName.toLowerCase();
  var elements = document.getElementsByTagName(tagName);
  var propToCheck = {script:'src', link: 'href'}[tagName];

  for (var i=0, iLen=elements.length; i<iLen; i++) {

    // If find a "matching" element, do nothing
    if (elements[i][propToCheck].indexOf(src) != -1) {
      return;
    }
  }

  // Otherwise, add an element of the required type
  var element = document.createElement(tagName);
  element[propToCheck] = src;
  document.getElementsByTagName('head')[0].appendChild(element);
}

conditionallyAddBySource('script', 'myJSLib.js');

Le nouvel élément ne doit pas nécessairement être ajouté à la tête, il peut simplement être écrit immédiatement en utilisant document.write ou attaché au corps (ou tout autre élément pouvant avoir des nœuds enfants autres que HTML et l'élément document) . Les éléments de lien devraient probablement être dans la tête cependant.

Modifier

Déterminez s'il faut vérifier src ou href selon que tagName est script ou link.

En utilisant la suggestion de Paul de querySelector, vous pouvez utiliser:

function conditionallyAddBySource(tagName, src) {

  tagName = tagName.toLowerCase();
  var propToCheck = {script:'src', link: 'href'}[tagName];
  var element = document.querySelector(tagName + '[' + propToCheck + '$="' + src + '"]');

  if (!element) {
    element = document.createElement(tagName);
    element[propToCheck] = src;
    document.getElementsByTagName('head')[0].appendChild(element);
  }
}

le support de querySelector fourni est disponible (IE 8 en mode standard et supérieur, ignorant les autres).

1
RobG

Le moyen le plus simple est le suivant: 

> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';
0
habibhassani