Carregar dinamicamente o JS dentro do JS

Eu tenho uma página web dinâmica onde eu preciso importar um arquivo JS externo (em uma condição IF ) dentro de outro arquivo javascript.

Eu tentei procurar uma solução viável, mas não funcionou.

Eu tentei carregar um arquivo JS para o DOM usando document.createElement() mas também não funcionou. Aparentemente, o Js foi carregado no DOM, mas não estava acessível no arquivo JS atual.

Solução no jQuery também vai ficar bem

O $.getScript() do jQuery é buggy às vezes, então eu uso minha própria implementação como:

 jQuery.loadScript = function (url, callback) { jQuery.ajax({ url: url, dataType: 'script', success: callback, async: true }); } 

e usá-lo como:

 if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){ //Stuff to do after someScript has loaded }); 

Meu palpite é que, em sua solução somente para DOM, você fez algo como:

 var script = document.createElement('script'); script.src = something; //do stuff with the script 

Em primeiro lugar, isso não funcionará porque o script não é adicionado à tree do documento, portanto, ele não será carregado. Além disso, mesmo quando você o faz, a execução do javascript continua enquanto o outro script está sendo carregado, portanto, seu conteúdo não estará disponível para você até que esse script esteja totalmente carregado.

Você pode ouvir o evento de load do script e fazer as coisas com os resultados como faria. Assim:

 var script = document.createElement('script'); script.onload = function () { //do stuff with the script }; script.src = something; document.head.appendChild(script); //or something of the likes 

Eu preciso fazer isso com freqüência, então eu uso isso:

 var loadJS = function(url, implementationCode, location){ //url is URL of external file, implementationCode is the code //to be called from the file, location is the location to //insert the  

Para mais informações, consulte este site Como incluo um arquivo JavaScript em outro arquivo JavaScript? , que é a fonte da minha ideia de function.

Você pode carregar dinamicamente o js dentro da página e não outro arquivo js

você tem que usar o getScript para carregar o arquivo js

 $.getScript("ajax/test.js", function(data, textStatus, jqxhr) { console.log(data); //data returned console.log(textStatus); //success console.log(jqxhr.status); //200 console.log('Load was performed.'); }); 

Necromaning.

Eu uso isso para carregar scripts dependentes;
Ele funciona com o IE8 + sem adicionar nenhuma dependência em outra biblioteca como o jQuery!

 var cScriptLoader = (function () { function cScriptLoader(files) { var _this = this; this.log = function (t) { console.log("ScriptLoader: " + t); }; this.withNoCache = function (filename) { if (filename.indexOf("?") === -1) filename += "?no_cache=" + new Date().getTime(); else filename += "&no_cache=" + new Date().getTime(); return filename; }; this.loadStyle = function (filename) { // HTMLLinkElement var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = _this.withNoCache(filename); _this.log('Loading style ' + filename); link.onload = function () { _this.log('Loaded style "' + filename + '".'); }; link.onerror = function () { _this.log('Error loading style "' + filename + '".'); }; _this.m_head.appendChild(link); }; this.loadScript = function (i) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = _this.withNoCache(_this.m_js_files[i]); var loadNextScript = function () { if (i + 1 < _this.m_js_files.length) { _this.loadScript(i + 1); } }; script.onload = function () { _this.log('Loaded script "' + _this.m_js_files[i] + '".'); loadNextScript(); }; script.onerror = function () { _this.log('Error loading script "' + _this.m_js_files[i] + '".'); loadNextScript(); }; _this.log('Loading script "' + _this.m_js_files[i] + '".'); _this.m_head.appendChild(script); }; this.loadFiles = function () { // this.log(this.m_css_files); // this.log(this.m_js_files); for (var i = 0; i < _this.m_css_files.length; ++i) _this.loadStyle(_this.m_css_files[i]); _this.loadScript(0); }; this.m_js_files = []; this.m_css_files = []; this.m_head = document.getElementsByTagName("head")[0]; // this.m_head = document.head; // IE9+ only function endsWith(str, suffix) { if (str === null || suffix === null) return false; return str.indexOf(suffix, str.length - suffix.length) !== -1; } for (var i = 0; i < files.length; ++i) { if (endsWith(files[i], ".css")) { this.m_css_files.push(files[i]); } else if (endsWith(files[i], ".js")) { this.m_js_files.push(files[i]); } else this.log('Error unknown filetype "' + files[i] + '".'); } } return cScriptLoader; })(); var ScriptLoader = new cScriptLoader(["foo.css", "Scripts/Script4.js", "foobar.css", "Scripts/Script1.js", "Scripts/Script2.js", "Scripts/Script3.js"]); ScriptLoader.loadFiles(); 

Se você estiver interessado no typescript --version usado para criar isto:

 class cScriptLoader { private m_js_files: string[]; private m_css_files: string[]; private m_head:HTMLHeadElement; private log = (t:any) => { console.log("ScriptLoader: " + t); } constructor(files: string[]) { this.m_js_files = []; this.m_css_files = []; this.m_head = document.getElementsByTagName("head")[0]; // this.m_head = document.head; // IE9+ only function endsWith(str:string, suffix:string):boolean { if(str === null || suffix === null) return false; return str.indexOf(suffix, str.length - suffix.length) !== -1; } for(var i:number = 0; i < files.length; ++i) { if(endsWith(files[i], ".css")) { this.m_css_files.push(files[i]); } else if(endsWith(files[i], ".js")) { this.m_js_files.push(files[i]); } else this.log('Error unknown filetype "' + files[i] +'".'); } } public withNoCache = (filename:string):string => { if(filename.indexOf("?") === -1) filename += "?no_cache=" + new Date().getTime(); else filename += "&no_cache=" + new Date().getTime(); return filename; } public loadStyle = (filename:string) => { // HTMLLinkElement var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = this.withNoCache(filename); this.log('Loading style ' + filename); link.onload = () => { this.log('Loaded style "' + filename + '".'); }; link.onerror = () => { this.log('Error loading style "' + filename + '".'); }; this.m_head.appendChild(link); } public loadScript = (i:number) => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = this.withNoCache(this.m_js_files[i]); var loadNextScript = () => { if (i + 1 < this.m_js_files.length) { this.loadScript(i + 1); } } script.onload = () => { this.log('Loaded script "' + this.m_js_files[i] + '".'); loadNextScript(); }; script.onerror = () => { this.log('Error loading script "' + this.m_js_files[i] + '".'); loadNextScript(); }; this.log('Loading script "' + this.m_js_files[i] + '".'); this.m_head.appendChild(script); } public loadFiles = () => { // this.log(this.m_css_files); // this.log(this.m_js_files); for(var i:number = 0; i < this.m_css_files.length; ++i) this.loadStyle(this.m_css_files[i]) this.loadScript(0); } } var ScriptLoader = new cScriptLoader(["foo.css", "Scripts/Script4.js", "foobar.css", "Scripts/Script1.js", "Scripts/Script2.js", "Scripts/Script3.js"]); ScriptLoader.loadFiles(); 

Se é para carregar uma lista dinâmica de scripts, escreva os scripts em um atributo, como data-main, por exemplo,
e faça um element.getAttribute("data-main").split(',')

tal como

 var target = document.currentScript || (function() { var scripts = document.getElementsByTagName('script'); // Note: this is for IE as IE doesn't support currentScript // this does not work if you have deferred loading with async // eg  // https://web.archive.org/web/20180618155601/https://www.w3schools.com/TAgs/att_script_async.asp return scripts[scripts.length - 1]; })(); target.getAttribute("data-main").split(',') 

para obter a lista.

O método jQuery.getScript() é uma forma abreviada da function Ajax (com o atributo dataType: $.ajax({ url: url, dataType: "script" }) )

Se você quiser que os scripts sejam cachable, use RequireJS ou siga o exemplo de jQuery ao estender o método jQuery.getScript similar ao seguinte.

 jQuery.cachedScript = function( url, options ) { // Allow user to set any option except for dataType, cache, and url options = $.extend( options || {}, { dataType: "script", cache: true, url: url }); // Use $.ajax() since it is more flexible than $.getScript // Return the jqXHR object so we can chain callbacks return jQuery.ajax( options ); }; // Usage $.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) { console.log( textStatus ); }); 

Referência: jQuery.getScript () | Documentação da API jQuery

Você pode fazer isso usando o JQuery:

 $.getScript("ajax/test.js", function(data, textStatus, jqxhr) { console.log(data); //data returned console.log(textStatus); //success console.log(jqxhr.status); //200 console.log('Load was performed.'); }); 

este link deve ajudar: http://api.jquery.com/jQuery.getScript/

jQuery tem $.getScript() :

Descrição : Carregue um arquivo JavaScript do servidor usando uma solicitação HTTP GET e, em seguida, execute-o.

Eu recomendo usar requirejs com arquivos de class javascript da AMD

bom exemplo de como usá-lo aqui

http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

Para criar meu plugin, eu precisava carregar scripts e estilos externos dentro de um arquivo JS, todos os quais eram predefinidos. Para conseguir isso, fiz o seguinte:

  this.loadRequiredFiles = function (callback) { var scripts = ['xx.js', 'yy.js']; var styles = ['zz.css']; var filesloaded = 0; var filestoload = scripts.length + styles.length; for (var i = 0; i < scripts.length; i++) { log('Loading script ' + scripts[i]); var script = document.createElement('script'); script.type = 'text/javascript'; script.src = scripts[i]; script.onload = function () { log('Loaded script'); log(this); filesloaded++; // (This means increment, ie add one) finishLoad(); }; document.head.appendChild(script); } for (var i = 0; i < styles.length; i++) { log('Loading style ' + styles[i]); var style = document.createElement('link'); style.rel = 'stylesheet'; style.href = styles[i]; style.type = 'text/css'; style.onload = function () { log('Loaded style'); log(this); filesloaded++; finishLoad(); }; document.head.appendChild(style); } function finishLoad() { if (filesloaded === filestoload) { callback(); } } }; 

Mais do script no contexto:

 function myPlugin() { var opts = { verbose: false }; ///< The options required to run this function var self = this; ///< An alias to 'this' in case we're in jQuery ///< Constants required for this function to work this.getOptions = function() { return opts; }; this.setOptions = function(options) { for (var x in options) { opts[x] = options[x]; } }; /** * @brief Load the required files for this plugin * @param {Function} callback A callback function to run when all files have been loaded */ this.loadRequiredFiles = function (callback) { var scripts = ['xx.js', 'yy.js']; var styles = ['zz.css']; var filesloaded = 0; var filestoload = scripts.length + styles.length; for (var i = 0; i < scripts.length; i++) { log('Loading script ' + scripts[i]); var script = document.createElement('script'); script.type = 'text/javascript'; script.src = scripts[i]; script.onload = function () { log('Loaded script'); log(this); filesloaded++; finishLoad(); }; document.head.appendChild(script); } for (var i = 0; i < styles.length; i++) { log('Loading style ' + styles[i]); var style = document.createElement('link'); style.rel = 'stylesheet'; style.href = styles[i]; style.type = 'text/css'; style.onload = function () { log('Loaded style'); log(this); filesloaded++; finishLoad(); }; document.head.appendChild(style); } function finishLoad() { if (filesloaded === filestoload) { callback(); } } }; /** * @brief Enable user-controlled logging within this function * @param {String} msg The message to log * @param {Boolean} force True to log message even if user has set logging to false */ function log(msg, force) { if (opts.verbose || force) { console.log(msg); } } /** * @brief Initialise this function */ this.init = function() { self.loadRequiredFiles(self.afterLoadRequiredFiles); }; this.afterLoadRequiredFiles = function () { // Do stuff }; } 

Você pode usar o método $.getScript() do jQuery para fazê-lo, mas se você quiser um recurso mais completo, o yepnope.js é a sua escolha. Suporta o carregamento condicional de scripts e folhas de estilo e é fácil de usar.

Aqui está um pequeno lib para carregar arquivos javascript e CSS dinamicamente:

https://github.com/todotresde/javascript-loader

Eu acho que é útil para carregar arquivos css e js em ordem e dinamicamente.

Suporte para estender para carregar qualquer lib que você quer, e não apenas o arquivo principal, você pode usá-lo para carregar arquivos personalizados.

IE:

          

Se você tiver muitos arquivos com dependencies , use o AMD / RequireJS. http://requirejs.org/