Impossibile aggiungere l'elemento <script>

263

Qualche idea sul perché la parte di codice seguente non aggiunga l'elemento di script al DOM?Impossibile aggiungere l'elemento <script>

var code = "<script></script>"; 
$("#someElement").append(code);

fonte

2009-03-04 Dan

definire "non funziona", anche se ho il sospetto che il problema sia che gli script non fanno realmente parte del dom tree. –

La mia scommessa è che il nodo script è stato aggiunto al DOM, ma il browser non sta eseguendo lo script. –

Dan, come l'hai provato? – James

247

Ho visto i problemi in cui alcuni browser non rispettano alcuni cambiamenti quando si esegue direttamente (e con questo intendo creare il codice HTML dal testo come si sta cercando con il tag script), ma quando si eseguirli con comandi integrati le cose vanno meglio. Prova questo:

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = url; 
$("#someElement").append(script);

Da: JSON for jQuery

fonte

2009-03-04 15:18:09 acrosman

+18

Il tag

Cosa vuol dire "non funziona"?

jQuery rileva che si sta tentando di creare un elemento SCRIPT e verrà eseguito automaticamente il contenuto dell'elemento all'interno del contesto globale. Mi stai dicendo che questo non funziona per te? -

$('#someElement').append('<script>alert("WORKING");</script>');

Edit: Se non riesci a vedere l'elemento SCRIPT nel DOM (in Firebug per esempio) dopo aver eseguito il comando che è perché jQuery, come ho detto, verrà eseguito il codice e poi cancellerà l'elemento SCRIPT - Credo che gli elementi SCRIPT siano sempre aggiunti al corpo ... ma comunque - il posizionamento non ha assolutamente alcuna influenza sull'esecuzione del codice in questa situazione.

fonte

2009-03-04 15:22:10 James

Voglio fare la stessa cosa ma aggiungere un tag di script nell'altro frame!

var url = 'library.js'; 
var script = window.parent.frames[1].document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = url; 
$('head',window.parent.frames[1].document).append(script);

fonte

2009-12-04 21:11:03 Julio

<script> 
    ... 
    ...jQuery("<script></script>")... 
    ... 
</script>

Il </script> all'interno della stringa letterale termina l'intero script, per evitare che "</scr" + "ipt>" può essere utilizzato invece.

fonte

2010-01-26 14:29:54

O non incorporare il javascript direttamente all'interno del documento HTML. I file di script esterni non presentano questo problema. –

Sequenze di escape: '" \ x3cscript \ x3e \ x3c/script \ x3e "'. In XHTML, devi solo inserire un blocco CDATA commentato. –

È piuttosto il ' Gumbo

E 'possibile caricare dinamicamente un file JavaScript utilizzando il jQuery function getScript

 
$.getScript('http://www.whatever.com/shareprice/shareprice.js', function() { 
    Display.sharePrice(); 
});

Ora lo script esterno sarà chiamato, e se non può essere caricato sarà con grazia degradare.

fonte

2010-02-09 15:22:42 Cueball

Questo non inserisce nulla nel DOM. Chiama 'eval()'. – nh2

Questo funziona:

$('body').append($("<script>alert('Hi!');<\/script>")[0]);

Sembra jQuery sta facendo qualcosa di intelligente con gli script, quindi è necessario aggiungere l'elemento HTML, piuttosto che oggetto jQuery.

fonte

2010-08-27 10:18:45 Darwin

Questa è l'unica soluzione che funziona nel mio caso. Gli altri precedenti dipendono dal codice javascript presente in precedenza nel file html. Dal momento che sto aggiungendo codice in modo dinamico, tale codice javascript non può essere conosciuto in anticipo! GRAZIE Darwin !! – tgoneil

Oppure 'var code ="

Aggiunta del SourceURL nel file di script aiutato Come accennato in questa pagina: https://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

nel file di script, aggiungere una dichiarazione con SourceURL come "// @ SourceURL = foo.js"
caricare lo script utilizzando jQuery $ .getScript() e lo script sarà disponibile nel tab "fonti" in cromo strumenti di sviluppo

fonte

2013-01-31 09:24:59

lo script è in esecuzione, non si può utilizzare document.write da esso. Utilizzare un avviso per testarlo ed evitare l'uso di document.write. Le istruzioni del file js con document.write non verranno eseguite e il resto della funzione verrà eseguito.

fonte

2013-06-21 16:03:37

Prova questa può essere utile: lo script

var fileref=document.createElement('script'); 
fileref.setAttribute("type","text/javascript"); 
fileref.setAttribute("src","scriptAnalytics.js"); 
document.getElementsByTagName("head")[0].appendChild(fileref);

fonte

2013-09-17 10:40:57

non ho idea del perchè questo tizio neghi l'unico che non sia così stupido da continuare a usare jquery per tutto! – SSpoke

Probabilmente la maggior parte delle risposte utilizza jQuery perché nella domanda l'OP sta usando jQuery. – sanbor

Allega al corpo:

$(document).ready(function() { 
    $("<script>", { src : "bootstrap.min.js", type : "text/javascript" }).appendTo("body"); 
});

fonte

2015-02-04 11:05:52

Questo è quello che penso sia la soluzione migliore. Google Analytics viene iniettato in questo modo.

var (function(){ 
    var p="https:" == document.location.protocol ? "https://" : "http://"; 
     d=document, 
     g=d.createElement('script'), 
     s=d.getElementsByTagName('script')[0]; 
     g.type='text/javascript'; 
     g.src=p+'url-to-your-script.js'; 
     s.parentNode.insertBefore(g,s); })();

fonte

2015-06-13 21:47:16 dzona

Un altro modo si può fare se si desidera aggiungere il codice sta usando il metodo document.createElement ma poi usando .innerHTML invece di .src.

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.innerHTML = 'alert("Hey there... you just appended this script to the body");'; 
$("body").append(script);

fonte

2016-05-25 09:11:52 Marc

-1

Basta creare un elemento analizzandolo con jQuery.

<div id="someElement"></div> 
<script> 
    var code = "<script>alert(123);<\/script>"; 
    $("#someElement").append($(code)); 
</script>

esempio di lavoro: https://plnkr.co/edit/V2FE28Q2eBrJoJ6PUEBz

fonte

2016-11-08 15:15:32 sanbor

Questo ha ancora lo stesso problema, alcuni browser non rispettano questo. –

Potrebbe farmi sapere quali browser e quale versione di jQuery stai usando? Grazie! – sanbor

Non è necessario jQuery per creare un Script DOM Element.Può essere fatto con vaniglia ES6 in questo modo:

const script = "console.log('Did it work?')" 
new Promise((resolve, reject) => { 
    (function(i,s,o,g,r,a,m){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.innerText=g;a.onload=r;m.parentNode.insertBefore(a,m)})(window,document,'script',script, resolve()) 
}).then(() => console.log('Sure did!'))

Non ha bisogno di essere avvolto in un Promise, ma in questo modo consente di risolvere la promessa quando i carichi di script, aiutando a prevenire condizioni di gara per lungo script in esecuzione.

fonte

2017-03-04 11:27:58

Ho provato questo one e funziona correttamente. Basta sostituire il simbolo < con quello \x3C.

// With Variable 
var code = "\x3Cscript>SomeCode\x3C/script>"; 
$("#someElement").append(code);

//Without Variable 
$("#someElement").append("\x3Cscript>SomeCode\x3C/script>");

È possibile verificare il codice here.

fonte

2017-11-03 23:10:13

può provare come questo

var code = "<script></" + "script>"; 
$("#someElement").append(code);

L'unica ragione per cui non si può fare "<script></script>" è perché la stringa non è consentito all'interno javascript perché lo strato DOM non può analizzare ciò che è e ciò che è js HTML.

fonte

2017-12-30 01:20:14 vipin

ho scritto un pacchetto npm che consente di scattare una stringa HTML, compresi i tag di script e aggiungerlo ad un contenitore, mentre l'esecuzione degli script

Esempio:

import appendHtml from 'appendhtml'; 

const html = '<p>Hello</p><script src="some_js_file.js"></script>'; 
const container = document.getElementById('some-div'); 

await appendHtml(html, container); 

// appendHtml returns a Promise, some_js_file.js is now loaded and executed (note the await)

Si trova qui : https://www.npmjs.com/package/appendhtml

fonte

2018-01-06 20:17:24 Lukas

Problemi correlati

Impossibile aggiungere l'elemento <script>

risposta

Problemi correlati