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

J'ai des problèmes pour 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 de chaîne sur ce var. J'ai ensuite essayé d'encoder la chaîne comme:

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

mais envoyer cela aux replaceWith()sorties juste cette chaîne au navigateur.

Quelqu'un peut-il me dire comment vous feriez pour ajouter dynamiquement une <script>balise dans le navigateur après le chargement de la page, idéalement via jQuery?

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

Exemple:

$.getScript("test.js", function(){
    alert("Running test.js");
});

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

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 un div, vous pouvez faire:

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

Un moyen plus simple est:

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

Vous pouvez également utiliser ce formulaire pour charger des css.

Cette réponse est techniquement similaire ou égale à ce que jcoffland a répondu. Je viens d'ajouter une requête pour détecter si un script est déjà présent ou non. J'en ai besoin car je travaille dans un site intranet avec quelques modules, dont certains partagent des scripts ou apportent les leurs, mais ces scripts n'ont pas besoin d'être chargés à chaque fois. J'utilise cet extrait depuis plus d'un an dans un environnement de production, cela fonctionne comme un charme. Commentant à 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'));
}

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

Dites que votre réponse AJAX est quelque chose comme

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

Notez que j'ai sauté la balise de fermeture exprès. 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);
    }
});

Ne me demandez pas pourquoi :-) C'est l'une de ces choses auxquelles je suis arrivé à la suite d'essais désespérés presque aléatoires et d'échecs.

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-ci, j'ai l'impression d'avoir réussi à diviser par zéro.

Exemple:

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

Cela 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(btw je pourrais vouloir utiliser à #someElementcause des conventions)

La chose la plus importante ici est le + = donc le html est ajouté et non remplacé.

Laissez un commentaire si cela n'a pas fonctionné. J'aimerais vous aider!

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

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

Mais si vous souhaitez ajouter et charger des scripts, utilisez la méthode de Rocket Hazmat .

Si vous essayez d'exécuter du JavaScript généré dynamiquement, vous seriez légèrement mieux en utilisant eval. Cependant, JavaScript est un langage tellement dynamique que vous ne devriez vraiment pas en avoir besoin.

Si le script est statique, alors la getScriptsuggestion de Rocket est la voie à suivre.