web-dev-qa-db-fra.com

Comment insérer dynamiquement une balise <script> via jQuery après le chargement de la page?

J'ai du mal à faire en sorte que cela fonctionne. J'ai d'abord essayé de définir mes balises de script en tant que chaînes, puis d'utiliser jquery replaceWith () pour les ajouter au document après le chargement de la page:

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

Mais j'ai eu des erreurs littérales sur cette var. J'ai ensuite essayé d'encoder la chaîne comme ceci:

var a = '&left;script type="text/javascript"&gt;some script here&lt;\/script&gt;';

mais envoyer cela à replaceWith() ne renvoie que cette chaîne au navigateur.

Quelqu'un peut-il me faire savoir s'il vous plaît comment vous y prendriez en ajoutant de manière dynamique une balise <script> au navigateur après le chargement de la page, idéalement via jQuery?

javascriptjqueryscript-tagjavascript-injection
94
Doug

Vous pouvez placer le script dans un fichier séparé, puis utiliser $.getScript pour le charger et l'exécuter.

Exemple:

_$.getScript("test.js", function(){
    alert("Running test.js");
});
_
97
Rocket Hazmat

Essayez ce qui suit:

<script type="text/javascript">
// Use any event to append the code
$(document).ready(function() 
{
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://scriptlocation/das.js";
    // Use any selector
    $("head").append(s);
});

http://api.jquery.com/append

61
Bassem

Voici la bonne façon de le faire avec JQuery moderne (2014):

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .appendTo('head');
})

ou si vous voulez vraiment remplacer une div vous pouvez faire:

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .replaceAll('#someelement');
});
32
jcoffland

Un moyen plus simple est:

$('head').append('<script type="text/javascript" src="your.js"></script>');

Vous pouvez également utiliser ce formulaire pour charger css.

9
iman

Cette réponse est techniquement similaire ou égale à celle de jcoffland. Je viens d'ajouter une requête pour détecter si un script est déjà présent ou non. J'ai besoin de cela parce que je travaille sur un site Web intranet avec quelques modules, dont certains partagent des scripts ou apportent les siens, mais ces scripts n'ont pas besoin d'être chargés à chaque fois. J'utilise cet extrait depuis plus d'un an en environnement de production, cela fonctionne comme un charme. Commentant pour moi-même: Oui je sais, il serait plus correct de demander si une fonction existe ... :-)

if (!$('head > script[src="js/jquery.searchable.min.js"]').length) {
    $('head').append($('<script />').attr('src','js/jquery.searchable.min.js'));
}
5
ddlab

Exemple:

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

Ça devrait marcher. Je l'ai essayé; même résultat. Mais quand j'ai utilisé ceci:

var length = 1;
var html = "";
for (var i = 0; i < length; i++) {
    html += '<div id="codeSnippet"></div>';
    html += '<script type="text/javascript">';
    html += 'your script here';
    html += '</script>';
}
$('#someElement').replaceWith(a);

Cela a fonctionné pour moi.

Edit: J'ai oublié le #someelement (je pourrais peut-être utiliser #someElement à cause des conventions)

La chose la plus importante ici est le + = ainsi le code HTML est ajouté et non remplacé.

Laissez un commentaire si cela n'a pas fonctionné. Je voudrais vous aider!

2
santinobonora

Il existe une solution de contournement qui ressemble davantage à un hack et je conviens que ce n'est pas la façon la plus élégante de le faire, mais qu'elle fonctionne à 100%:

Dites que votre réponse AJAX ressemble à quelque chose comme

<b>some html</b>
<script>alert("and some javscript")

Notez que j'ai volontairement ignoré la balise de fermeture. Ensuite, dans le script qui charge ce qui précède, procédez comme suit:

$.ajax({
    url: "path/to/return/the-above-js+html.php",
    success: function(newhtml){
        newhtml += "<";
        newhtml += "/script>";
        $("head").append(newhtml);
    }
});

Mais ne me demandez pas pourquoi :-) C’est l’une de ces choses à laquelle je suis arrivé à la suite d’essais désespérés presque aléatoires et qui a échoué.

Je n'ai pas de suggestions complètes sur son fonctionnement, mais il est intéressant de noter que cela ne fonctionnera PAS si vous ajoutez la balise de fermeture sur une ligne.

Dans des moments comme ceux-là, j'ai l'impression d'avoir réussi à diviser par zéro.

2
Ash

Voici un moyen beaucoup plus clair - pas besoin de jQuery - qui ajoute un script en tant que dernier enfant de <body>:

document.body.innerHTML +='<script src="mycdn.js"><\/script>'

Mais si vous voulez ajouter et charger des scripts utilisez des scripts Méthode de Rocket Hazmat .

0
Gagik Sargsyan