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


101

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"&gt;some script here&lt;\/script&gt;';

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?


Puoi spiegare cosa stai cercando di ottenere aggiungendo un <script>tag al documento?
Pointy

La risposta di @ Rocket è la migliore, ma se volessi sicuramente aggiungere uno script inline da una stringa, lo dovresti semplicemente passare alla eval()funzione. Ma l'uso di eval()suggerisce quasi sempre che c'è un modo migliore di fare ciò che stai cercando di fare.
Nick il

stiamo cercando di posticipare il caricamento di annunci di terze parti fino alla fine della pagina. quegli annunci vengono chiamati tramite 2 tag script, quindi volevo eseguire una funzione dopo il caricamento della pagina che li inserisse dinamicamente.
Doug il

2
Non tutti gli script di terze parti sono progettati per essere differibili. Se lo script utilizza document.writee lo chiami dopo il caricamento della pagina, distruggerà la pagina.
bobince

1
Perché non importare quei tag negli <iframe>elementi? Puoi rimandare l'impostazione <iframe>dell'URL finché non sei pronto.
Pointy

Risposte:


103

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

Esempio:

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

2
grazie, ma questo lo incollerà nel DOM? mi rendo conto di aver tralasciato quelle informazioni importanti, che ho bisogno che il tag script venga inserito nel DOM, valutato, a quel punto restituisce il codice dell'annuncio di terze parti da visualizzare sul nostro sito in uno specifico <div>.
Doug il

1
$.getScriptcaricherà semplicemente un file .js tramite AJAX e lo eseguirà. Non è necessario che lo script si trovi nel DOM per poter accedere a un div sulla tua pagina.
Rocket Hazmat

6
Ma con $.getScript()lo script sarà necessario essere sullo stesso dominio o sarà necessario supportare sia il dominio remoto che il browser CORS.
Hippietrail

14
@hippietrail In realtà non è vero. Inserisce solo un semplice tag script, che non richiede CORS o stesso dominio. Lo uso per abbreviare il codice per caricare Google Analytics, ad esempio, e si carica perfettamente. Dietro le quinte il codice jquery effettivo che viene eseguito è piuttosto simile allo snippet di GA, in effetti.
Chris Moschini

39
Poiché la risposta di @hippietrail attirerà la massima attenzione con i suoi 4 voti positivi, dovrebbe essere chiarito con enfasi che non è corretto. Come evidenziano i documenti jQuery nelle loro $.ajaxnote: "Le richieste di script e JSONP non sono soggette alle stesse restrizioni dei criteri di origine". fonte . In altre parole, $.getScriptpuoi estrarre file .js da altri domini, non solo dal tuo .
EleventyOne

64

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


4
+1 per l'utilizzo di appendper aggiungere uno script. Append fa sì che anche lo script inline venga valutato immediatamente (proprio quello di cui avevo bisogno). Grazie
Gone Coding

1
Con questo approccio finisco per avere molti problemi in IE8 / 9. Vale a dire errori di overflow dello stack. Ho fatto ricorso al metodo $ .getScript () di seguito per avere questo lavoro su tutta la linea.
Zmonteca

1
Sì @jcoffland questo è stato scritto nell'ottobre 2010 :)
Bassem

Se la pagina contenente questo codice viene caricata utilizzando AJAX, il browser genererà un avviso "XMLHttpRequest sincrono sul thread principale è deprecato a causa dei suoi effetti dannosi per l'esperienza dell'utente finale".
Rajshekar Reddy

@Reddy Ottimo commento. Questo è stato pubblicato nell'ottobre 2010, sono sicuro che ormai questo metodo non è più un approccio valido / consigliato, gli utenti devono procedere a propria discrezione.
Bassem

34

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

3
O invece .text ('some script here') puoi scrivere .attr ('src', 'path_to_your_js_file')
Serhii Maksymchuk

11

Un modo più semplice è:

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

Puoi anche usare questo modulo per caricare css.


6
Si potrebbe voler evitare di mettere la stringa </script>nell'origine però in quanto può causare problemi di parsing: stackoverflow.com/questions/236073/...
iX3

2
scappare dall'ultimo ha /fatto il trucco per me:$('head').append('<script src="your.js"><\/script>');
jerik

5

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

btw. Faccio lo stesso con i fogli di stile: if (! $ ('Head> link [href = "widgets / css / widgets.css"]'). Length) {$ ('head'). Append ($ ('<link / > '). attr (' rel ',' stylesheet '). attr (' href ',' widgets / css / widgets.css '));}
ddlab

2

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.


3
Non funzionerà se il tag dello script di chiusura è in un unico pezzo poiché il browser lo vede come tag di chiusura per il tuo script invece che come una stringa letterale.
Gone Coding

1
<\/script>sarebbe comunque valido
SP

Penso che il punto di @ TrueBlueAussie fosse in risposta al tuo commento "Non chiedermi perché ... ma abbastanza interessante, NON funzionerà se aggiungi il tag di chiusura in una riga." Ha spiegato il motivo in modo che tutti i lettori che desiderano una risposta migliore di "Non lo so" possano trovarla più facilmente. Vedi anche: javascript.crockford.com/script.html
iX3

1
@Sathvik è corretto, secondo quel collegamento. Il commento di Ash sembra essere stato una risposta a uno che è stato rimosso.
Arlen Beiler

2

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!


2

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 .


-4

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.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.