web-dev-qa-db-fra.com

Comment ajouter un script d'élément DOM à la section head?

Je veux ajouter un élément DOM à la tête de la section HTML. jQuery n'autorise pas l'ajout de script d'élément DOM à la section head et exécute à la place, Référence . 

Je veux ajouter des balises script et écrire un script dans la section <head>.

var script = '<script type="text/javascript"> //function </script>'
$('head').append(script);

Quelque chose comme ça avec des fonctions. J'ai essayé jQuery et javascript \, mais cela ne fonctionne pas.

Dites-moi comment ajouter et écrire script à head avec jQuery ou javascript.

J'ai fatigué le javascript pour ajouter un élément DOM, mais cela ne fonctionne pas avec .innerHTML() pour écrire en tête. J'utilise jQuery 2.0.3 et jQuery UI 1.10.3.

Je veux ajouter un script encodé en base64 à la section head. J'utilise base64 decoder js comme this pour décoder le javascript, puis mettre la section head.

//Édité
Ce sera 

$.getScript('base64.js');
var encoded = "YWxlcnQoImhpIik7DQo="; //More text
var decoded = decodeString(encoded);
var script = '<script type="text/javascript">' +decoded + '</script>';
$('head').append(script);

Pour adapter un script codé et l'ajout d'un fichier javascript. Je veux utiliser base64.js ou un autre fichier javascript du décodeur pour les navigateurs n'accepte pas atob().

javascriptjqueryhtmldom
9
john3825

essaye ça

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'url';    

document.getElementsByTagName('head')[0].appendChild(script);
33
pbaris

Si vous injectez plusieurs balises de script dans la tête, avec une combinaison de fichiers de script locaux et distants, il peut arriver que les scripts locaux dépendant de scripts externes (tels que le chargement de jQuery à partir de googleapis) comportent des erreurs chargé avant les locaux sont.

Donc, quelque chose comme ceci aurait un problème: ("jQuery n'est pas défini" dans jquery.some-plugin.js).

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
head.appendChild(script);

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "/jquery.some-plugin.js";
head.appendChild(script);

Bien sûr, cette situation est à quoi sert le .onload (), mais si plusieurs scripts sont chargés, cela peut être fastidieux.

Pour remédier à cette situation, j’ai mis en place cette fonction qui garde une file de scripts à charger, chargeant chaque élément suivant à la fin de la précédente, et renvoyant une promesse résolue lorsque le script (ou le dernier script de la file si aucun paramètre) est terminé le chargement.

load_script = function(src) {
    // Initialize scripts queue
    if( load_script.scripts === undefined ) {
        load_script.scripts = [];
        load_script.index = -1;
        load_script.loading = false;
        load_script.next = function() {
            if( load_script.loading ) return;

            // Load the next queue item
            load_script.loading = true;
            var item = load_script.scripts[++load_script.index];
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = item.src;
            // When complete, start next item in queue and resolve this item's promise
            script.onload = () => {
                load_script.loading = false;
                if( load_script.index < load_script.scripts.length - 1 ) load_script.next();
                item.resolve();
            };
            head.appendChild(script);
        };
    };

    // Adding a script to the queue
    if( src ) {
        // Check if already added
        for(var i=0; i < load_script.scripts.length; i++) {
            if( load_script.scripts[i].src == src ) return load_script.scripts[i].promise;
        }
        // Add to the queue
        var item = { src: src };
        item.promise = new Promise(resolve => {item.resolve = resolve;});
        load_script.scripts.Push(item);
        load_script.next();
    }

    // Return the promise of the last queue item
    return load_script.scripts[ load_script.scripts.length - 1 ].promise;
}

Avec cet ajout de scripts afin de s'assurer que le précédent est terminé avant de regarder le prochain peut être fait comme ...

["https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
 "/jquery.some-plugin.js",
 "/dependant-on-plugin.js",
].forEach(load_script);

Ou chargez le script et utilisez la promesse de retour pour effectuer le travail une fois terminé ...

load_script("some-script.js")
.then(function() {
    /* some-script.js is done loading */
});
7
Nickolas Hook

essaie ::

var script = document.createElement("script");
script.type="text/javascript";
script.innerHTML="alert('Hi!');";
document.getElementsByTagName('head')[0].appendChild(script);

3
GuerraTron
var script = $('<script type="text/javascript">// function </script>')
document.getElementsByTagName("head")[0].appendChild(script[0])

Mais dans ce cas, le script ne sera pas exécuté et les fonctions ne seront pas accessibles dans le namespase global. Pour utiliser le code dans <script> vous devez faire comme dans votre question

$('head').append(script);

2
Dmitry Masley

C'est une vieille question, et je sais qu'elle demande spécifiquement d'ajouter une balise de script dans la tête. Cependant, d'après l'explication des PO, ils ont simplement l'intention d'exécuter du code JS obtenu via une autre fonction de JS.

C'est beaucoup plus simple que d'ajouter une balise de script dans la page.

Simplement:

eval(decoded);

Eval exécutera une chaîne de JS en ligne, sans qu'il soit nécessaire de l'ajouter au DOM.

Je ne pense pas qu'il soit vraiment nécessaire d'ajouter une balise de script en ligne au DOM après le chargement de la page.

Plus d'infos ici: http://www.w3schools.com/jsref/jsref_eval.asp

2
Luke McGregor

Meilleure solution que j'ai trouvée:

Append_To_Head('script', ' alert("hii"); ');
//or
Append_To_Head('script', 'http://example.com/script.js ');
//or
Append_To_Head('style',  ' #myDiv{color:red;} ');
//or
Append_To_Head('style',  'http://example.com/style.css ');



function Append_To_Head(elemntType, content){
    // if provided content is "link" or "inline codes"
    var Is_Link = content.split(/\r\n|\r|\n/).length <= 1  &&  content.indexOf("/") > -1;
    if(Is_Link){
        if (elemntType=='script')    { var x=document.createElement('script');x.id=id;  x.src=content;  x.type='text/javascript'; }
        else if (elemntType=='style'){ var x=document.createElement('link');  x.id=id;  x.href=content; x.type='text/css';  x.rel = 'stylesheet'; }
    }
    else{
        var x = document.createElement(elemntType);
        if (elemntType=='script')    { x.type='text/javascript';    x.innerHTML = content;  }
        else if (elemntType=='style'){ x.type='text/css';    if (x.styleSheet){ x.styleSheet.cssText=content; } else { x.appendChild(document.createTextNode(content)); }   }
    }
    //append in head
    (document.head || document.getElementsByTagName('head')[0]).appendChild(x);
}
1
T.Todua

Selon l'auteur, ils veulent créer un script dans la tête, pas un lien vers un fichier de script.

Cela peut éventuellement être fait en tant que tel:

var script = document.createTextNode("<script>alert('Hi!');</script>");   
document.getElementsByTagName('head')[0].appendChild(script);
1
liljoshu

Voici une fonction sûre et réutilisable permettant d’ajouter un script à la section head s’il n’y existe pas déjà.

voir exemple de travail ici: Exemple

<!DOCTYPE html>
<html>
  <head>
    <base href="/"/>
    <style>
    </style>
  </head>
  <body>
    <input type="button" id="" style='width:250px;height:50px;font-size:1.5em;' value="Add Script" onClick="addScript('myscript')"/>
    <script>
      function addScript(filename)
      {
        // house-keeping: if script is allready exist do nothing
        if(document.getElementsByTagName('head')[0].innerHTML.toString().includes(filename + ".js"))
        {
          alert("script is allready exist in head tag!")
        }
        else
        {
          // add the script
          loadScript('/',filename + ".js");
        }
      }
      function loadScript(baseurl,filename)
      {
        var node = document.createElement('script');
        node.src = baseurl + filename;
        document.getElementsByTagName('head')[0].appendChild(node);
        alert("script added");
      }
    </script>
  </body>
</html>
0
jonathana

J'utilise PHP en tant que langage côté serveur, donc l'exemple que j'écrirai - mais je suis sûr qu'il existe également une méthode de votre côté serveur.

Demandez à votre langue côté serveur de l'ajouter à partir d'une variable. w/php quelque chose comme ça irait comme suit.

Notez que cela ne fonctionnera que si le script est chargé avec le chargement de la page . Si vous souhaitez le charger de manière dynamique, cette solution ne vous aidera pas.

PHP

HTML

<head>
    <script type="text/javascript"> <?php echo $decodedstring ?> </script>
</head>

En résumé: Décodez avec serverside et insérez-le dans votre code HTML en utilisant le langage du serveur.

0
Ulad Kasach

vous pourriez faire:

var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "script_source_here";
(document.getElementsByTagName("head")[0] || document.documentElement ).appendChild(scriptTag);
0
Sudhir Bastakoti