Come inserire dinamicamente un tag <script> tramite jQuery dopo il caricamento della pagina?

Ho problemi a farlo funzionare. Ho prima provato a impostare i miei tag di script come stringhe e quindi a utilizzare jquery replaceWith () per aggiungerli al documento dopo il caricamento della pagina:

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

Ma ho ricevuto errori di stringa letterale su quella var. Ho quindi provato a codificare la stringa come:

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

ma inviandolo a replaceWith()restituisce solo quella stringa al browser.

Qualcuno può farmi sapere come faresti per aggiungere dinamicamente un <script>tag nel browser dopo il caricamento della pagina, idealmente tramite jQuery?

È possibile inserire lo script in un file separato, quindi utilizzarlo $.getScriptper caricarlo ed eseguirlo.

Esempio:

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

Prova quanto segue:

<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

Ecco il modo corretto per farlo con JQuery moderno (2014):

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

o se vuoi davvero sostituire un div potresti fare:

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

Un modo più semplice è:

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

Puoi anche usare questo modulo per caricare css.

Questa risposta è tecnicamente simile o uguale a ciò che ha risposto jcoffland. Ho appena aggiunto una query per rilevare se uno script è già presente o meno. Ne ho bisogno perché lavoro in un sito intranet con un paio di moduli, di cui alcuni condividono script o portano i propri, ma questi script non devono essere caricati di nuovo ogni volta. Sto usando questo frammento da più di un anno nell'ambiente di produzione, funziona come un fascino. Commentando tra me e me: Sì lo so, sarebbe più corretto chiedere se esiste una funzione ... :-)

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

C'è una soluzione alternativa che suona più come un hack e sono d'accordo che non è il modo più elegante per farlo, ma funziona al 100%:

Supponiamo che la tua risposta AJAX sia qualcosa di simile

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

Nota che ho saltato apposta il tag di chiusura. Quindi nello script che carica quanto sopra, procedi come segue:

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

Basta non chiedermi perché :-) Questa è una di quelle cose a cui sono arrivato come risultato di prove disperate quasi casuali e fallimenti.

Non ho suggerimenti completi su come funziona, ma abbastanza interessante, NON funzionerà se aggiungi il tag di chiusura in una riga.

In tempi come questi, mi sento come se avessi diviso con successo per zero.

Esempio:

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

Dovrebbe funzionare. L'ho provato; stesso risultato. Ma quando ho usato questo:

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);

Questo ha funzionato per me.

Modifica: ho dimenticato il #someelement(btw potrei voler usare a #someElementcausa delle convenzioni)

La cosa più importante qui è il + = quindi l'html viene aggiunto e non sostituito.

Lascia un commento se non ha funzionato. Mi piacerebbe aiutarti!

Ecco un modo molto più chiaro - non c'è bisogno di jQuery - che aggiunge uno script come ultimo figlio di <body>:

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

Ma se vuoi aggiungere e caricare script usa il metodo di Rocket Hazmat .

Se stai tentando di eseguire JavaScript generato dinamicamente, staresti leggermente meglio usando eval. Tuttavia, JavaScript è un linguaggio così dinamico che non dovresti davvero averne bisogno.

Se lo script è statico, il getScriptsuggerimento di Rocket è la strada da percorrere.