Modi per aggiungere file javascript dynamicmente in una pagina

Ho visto il file Scriptaculous.js per includere i file javascript richiesti in modo dinamico. C’è un approccio migliore per includere javascript in modo dinamico.

Ad esempio, vorrei includere i miei file js come,

 

Come posso farlo in modo efficiente?

Per caricare un file .js o .css in modo dinamico, in poche parole, significa utilizzare i metodi DOM per creare innanzitutto un nuovo elemento “SCRIPT” o “LINK”, assegnargli gli attributi appropriati e, infine, utilizzare element.appendChild () per aggiungere l’elemento alla posizione desiderata nell’albero del documento. Sembra molto più elegante di quanto sia in realtà. Vediamo come tutto viene insieme:

 function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file 

spero che sia pieno

Puoi usare la funzione jQuery.getScript() … Penso che sarà molto più facile con questo includere un file .js JavaScript.

Ecco il riferimento.

ci sono molti modi diversi, ma il modo in cui Google carica script aggiuntivi è come questo:

 function getScript(src) { document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>'); } 

Questo è preso direttamente da Google Maps loader.

Scrivere un tag script direttamente nel documento è il modo più semplice ed efficace.

Per aggiungere un nuovo file javascript in modo dinamico:

 function includeJS(jsFile) { $('head').append($(' 

Ho visto cosa fa il loader scriptaculous. Quello che fa è che passa attraverso tutti i tag di script nel documento per trovare quello che si carica da solo, ad esempio:

  

Quindi analizza la stringa quer utilizzata nell’attributo src e crea dynamicmente tag di script aggiuntivi per ogni file di script. Allo stesso tempo, analizza anche il percorso dello script di base ( /path/to/single.js ) e utilizza lo stesso percorso per caricare i file di dipendenza (ad esempio /path/to/first.js ).

Puoi creare il tuo caricatore di script come questo. In vanilla javascript, puoi utilizzare le seguenti funzioni:

  • getElementsByTagName : trova tutti gli script
  • getAttribute – trova l’attributo src / href / type
  • createElement : crea un elemento di script
  • appendChild – append a capo / corpo

Anand Thangappan ha pubblicato una soluzione che utilizza queste funzioni. Se si utilizza un framework come jQuery o MooTools, entrambi forniscono le proprie implementazioni di caricamento dinamico di JsvaScript.

Infine, c’è una soluzione lato server per il tuo problema. Guarda minify : combina e minimizza più file CSS o JavaScript in un unico download.

Possiamo estendere rapidamente questo in modo che una richiamata possa essere eseguita una volta che lo script è stato aggiunto.

 function loadjscssfile(filename, filetype, callback){ if (typeof fileref!="undefined") { document.getElementsByTagName("head")[0].appendChild(fileref); callback(); } } 

Seguendo il consiglio dei commenti di Salaman A , ho scoperto come Google lo fa ora con Analytics: https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking

Ed ecco una versione più generica dello stesso codice:

 (function() { var s = document.createElement('script'); // Create a script element s.type = "text/javascript"; // optional in html5 s.async = true; // asynchronous? true/false s.src = "//example.com/your_script.js"; var fs = document.getElementsByTagName('script')[0]; // Get the first script fs.parentNode.insertBefore(s, fs); })(); 

document.getElementsByTagName("head")[0].appendChild(fileref‌​) non funziona se si dispone di alcuni documenti.ready () funziona in linea. $("head").append(fileref); funziona alla grande per me, anche se ha bisogno di riferimento in linea jquery.min.js .

       

e master_load.js :

 function loadjscssfile(filename) { if (filename.substr(filename.length - 4) == ".css") { // 'endsWith' is not IE supported. var fileref = document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("href", filename) //fileref.setAttribute("type", "text/css") } else if (filename.substr(filename.length - 3) == ".js") { var fileref = document.createElement('script') fileref.setAttribute("src", filename) //fileref.setAttribute("type", "text/javascript") } $("head").append(fileref); } function load_master_css() { loadjscssfile("css/bootstrap.min.css"); // bunch of css files } function load_master_js() { loadjscssfile("script/bootstrap.min.js"); // bunch of js files }