una tablas tabla pagina obtener manejo leer funcion ejemplos ejecutar datos contenido con cargar carga asincrona archivos archivo antes agregar javascript file import include

tablas - obtener datos de una tabla html javascript



Carga dinĂ¡micamente un archivo JavaScript (22)

¿Cómo se puede cargar de manera confiable y dinámica un archivo JavaScript? Esto se puede usar para implementar un módulo o componente que, cuando se "inicialice", el componente cargará dinámicamente todas las secuencias de comandos de la biblioteca JavaScript necesarias a petición.

El cliente que utiliza el componente no necesita cargar todos los archivos de script de la biblioteca (e insertar manualmente las etiquetas <script> en su página web) que implementan este componente, solo el archivo de script del componente ''principal''.

¿Cómo logran esto las bibliotecas mainstream de JavaScript (Prototype, jQuery, etc.)? ¿Estas herramientas fusionan múltiples archivos JavaScript en una sola versión redistribuible de ''compilación'' de un archivo de script? ¿O hacen alguna carga dinámica de scripts auxiliares de ''biblioteca''?

Una adición a esta pregunta: ¿hay alguna manera de manejar el evento después de que se cargue un archivo JavaScript incluido dinámicamente? El prototipo tiene document.observe para eventos de todo el documento. Ejemplo:

document.observe("dom:loaded", function() { // initially hide all containers for tab content $$(''div.tabcontent'').invoke(''hide''); });

¿Cuáles son los eventos disponibles para un elemento script?


¿Alguien tiene una mejor manera?

Creo que solo agregar el script al cuerpo sería más fácil que agregarlo al último nodo de la página. Qué tal esto:

function include(url) { var s = document.createElement("script"); s.setAttribute("type", "text/javascript"); s.setAttribute("src", url); document.body.appendChild(s); }


¡Manténgalo agradable, corto, simple y fácil de mantener! :]

// 3rd party plugins / script (don''t forget the full path is necessary) var FULL_PATH = '''', s = [ FULL_PATH + ''plugins/script.js'' // Script example FULL_PATH + ''plugins/jquery.1.2.js'', // jQuery Library FULL_PATH + ''plugins/crypto-js/hmac-sha1.js'', // CryptoJS FULL_PATH + ''plugins/crypto-js/enc-base64-min.js'' // CryptoJS ]; function load(url) { var ajax = new XMLHttpRequest(); ajax.open(''GET'', url, false); ajax.onreadystatechange = function () { var script = ajax.response || ajax.responseText; if (ajax.readyState === 4) { switch(ajax.status) { case 200: eval.apply( window, [script] ); console.log("library loaded: ", url); break; default: console.log("ERROR: library not loaded: ", url); } } }; ajax.send(null); } // initialize a single load load(''plugins/script.js''); // initialize a full load of scripts if (s.length > 0) { for (i = 0; i < s.length; i++) { load(s[i]); } }

Este código es simplemente un breve ejemplo funcional que podría requerir funciones adicionales para soporte completo en cualquier plataforma (o plataforma).


Acabo de enterarme de una gran característica en YUI 3 (en el momento de escribir está disponible en versión de vista previa). Puede insertar fácilmente dependencias de bibliotecas YUI y módulos "externos" (lo que está buscando) sin demasiados códigos: cargador YUI .

También responde su segunda pregunta con respecto a la función que se llama tan pronto como se carga el módulo externo.

Ejemplo:

YUI({ modules: { ''simple'': { fullpath: "http://example.com/public/js/simple.js" }, ''complicated'': { fullpath: "http://example.com/public/js/complicated.js" requires: [''simple''] // <-- dependency to ''simple'' module } }, timeout: 10000 }).use(''complicated'', function(Y, result) { // called as soon as ''complicated'' is loaded if (!result.success) { // loading failed, or timeout handleError(result.msg); } else { // call a function that needs ''complicated'' doSomethingComplicated(...); } });

Funcionó perfectamente para mí y tiene la ventaja de administrar dependencias. Consulte la documentación de YUI para ver un ejemplo con el calendario YUI 2 .


Algo como esto...

<script> $(document).ready(function() { $(''body'').append(''<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&callback=getCurrentPickupLocation" async defer><//script>''); }); </script>


Aquí hay un código de ejemplo que he encontrado ... ¿Alguien tiene una mejor manera?

function include(url) { var s = document.createElement("script"); s.setAttribute("type", "text/javascript"); s.setAttribute("src", url); var nodes = document.getElementsByTagName("*"); var node = nodes[nodes.length -1].parentNode; node.appendChild(s); }


Aquí un ejemplo simple para una función para cargar archivos JS. Puntos relevantes:

  • no necesita jQuery, por lo que puede usarlo inicialmente para cargar también el archivo jQuery.js
  • es asíncrono con devolución de llamada
  • garantiza que se cargue solo una vez, ya que mantiene un recinto con el registro de direcciones URL cargadas, lo que evita el uso de la red
  • al contrario de jQuery $.ajax o $.getScript puede usar nonces, resolviendo así problemas con CSP unsafe-inline . Solo usa la propiedad script.nonce

var getScriptOnce = function() { var scriptArray = []; //array of urls (closure) //function to defer loading of script return function (url, callback){ //the array doesn''t have such url if (scriptArray.indexOf(url) === -1){ var script=document.createElement(''script''); script.src=url; var head=document.getElementsByTagName(''head'')[0], done=false; script.onload=script.onreadystatechange = function(){ if ( !done && (!this.readyState || this.readyState == ''loaded'' || this.readyState == ''complete'') ) { done=true; if (typeof callback === ''function'') { callback(); } script.onload = script.onreadystatechange = null; head.removeChild(script); scriptArray.push(url); } }; head.appendChild(script); } }; }();

Ahora lo usas simplemente por

getScriptOnce("url_of_your_JS_file.js");


Escribí un módulo simple que automatiza el trabajo de importar / incluir scripts de módulo en JavaScript. Pruébalo y por favor, ¡deja un comentario! :) Para una explicación detallada del código, consulte esta publicación en el blog: http://stamat.wordpress.com/2013/04/12/javascript-require-import-include-modules/

var _rmod = _rmod || {}; //require module namespace _rmod.on_ready_fn_stack = []; _rmod.libpath = ''''; _rmod.imported = {}; _rmod.loading = { scripts: {}, length: 0 }; _rmod.findScriptPath = function(script_name) { var script_elems = document.getElementsByTagName(''script''); for (var i = 0; i < script_elems.length; i++) { if (script_elems[i].src.endsWith(script_name)) { var href = window.location.href; href = href.substring(0, href.lastIndexOf(''/'')); var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length); return url.substring(href.length+1, url.length); } } return ''''; }; _rmod.libpath = _rmod.findScriptPath(''script.js''); //Path of your main script used to mark the root directory of your library, any library _rmod.injectScript = function(script_name, uri, callback, prepare) { if(!prepare) prepare(script_name, uri); var script_elem = document.createElement(''script''); script_elem.type = ''text/javascript''; script_elem.title = script_name; script_elem.src = uri; script_elem.async = true; script_elem.defer = false; if(!callback) script_elem.onload = function() { callback(script_name, uri); }; document.getElementsByTagName(''head'')[0].appendChild(script_elem); }; _rmod.requirePrepare = function(script_name, uri) { _rmod.loading.scripts[script_name] = uri; _rmod.loading.length++; }; _rmod.requireCallback = function(script_name, uri) { _rmod.loading.length--; delete _rmod.loading.scripts[script_name]; _rmod.imported[script_name] = uri; if(_rmod.loading.length == 0) _rmod.onReady(); }; _rmod.onReady = function() { if (!_rmod.LOADED) { for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){ _rmod.on_ready_fn_stack[i](); }); _rmod.LOADED = true; } }; //you can rename based on your liking. I chose require, but it can be called include or anything else that is easy for you to remember or write, except import because it is reserved for future use. var require = function(script_name) { var np = script_name.split(''.''); if (np[np.length-1] === ''*'') { np.pop(); np.push(''_all''); } script_name = np.join(''.''); var uri = _rmod.libpath + np.join(''/'')+''.js''; if (!_rmod.loading.scripts.hasOwnProperty(script_name) && !_rmod.imported.hasOwnProperty(script_name)) { _rmod.injectScript(script_name, uri, _rmod.requireCallback, _rmod.requirePrepare); } }; var ready = function(fn) { _rmod.on_ready_fn_stack.push(fn); }; // ----- USAGE ----- require(''ivar.util.array''); require(''ivar.util.string''); require(''ivar.net.*''); ready(function(){ //do something when required scripts are loaded });


Estoy perdido en todas estas muestras, pero hoy necesitaba cargar un .js externo de mi .js principal y lo hice:

document.write("<script src=''https://www.google.com/recaptcha/api.js''></script>");


Hay scripts que están diseñados específicamente para este propósito.

yepnope.js está integrado en Modernizr, y lab.js es una versión más optimizada (pero menos fácil de usar.

No recomendaría hacer esto a través de una gran biblioteca como jquery o prototipo, porque uno de los principales beneficios de un gestor de scripts es la capacidad de cargar scripts antes; no deberías esperar hasta que jquery y todos tus elementos dom se carguen antes. ejecutando un control para ver si desea cargar dinámicamente un script.


He usado otra solución que encontré en la red ... esta está bajo creativecommons y comprueba si la fuente fue incluida antes de llamar a la función ...

puedes encontrar el archivo aquí: include.js

/** include - including .js files from JS - [email protected] - 2005-02-09 ** Code licensed under Creative Commons Attribution-ShareAlike License ** http://creativecommons.org/licenses/by-sa/2.0/ **/ var hIncludes = null; function include(sURI) { if (document.getElementsByTagName) { if (!hIncludes) { hIncludes = {}; var cScripts = document.getElementsByTagName("script"); for (var i=0,len=cScripts.length; i < len; i++) if (cScripts[i].src) hIncludes[cScripts[i].src] = true; } if (!hIncludes[sURI]) { var oNew = document.createElement("script"); oNew.type = "text/javascript"; oNew.src = sURI; hIncludes[sURI]=true; document.getElementsByTagName("head")[0].appendChild(oNew); } } }


Hice básicamente lo mismo que hiciste con Adam, pero con una modificación de diapositivas para asegurarme de que estaba añadiendo a la etiqueta principal para hacer el trabajo. Simplemente creé una función de inclusión (código a continuación) para manejar los archivos script y css.

Esta función también comprueba para asegurarse de que el script o el archivo CSS no se haya cargado dinámicamente. No verifica los valores codificados a mano y puede haber una forma mejor de hacerlo, pero cumplió el propósito.

function include( url, type ){ // First make sure it hasn''t been loaded by something else. if( Array.contains( includedFile, url ) ) return; // Determine the MIME-type var jsExpr = new RegExp( "js$", "i" ); var cssExpr = new RegExp( "css$", "i" ); if( type == null ) if( jsExpr.test( url ) ) type = ''text/javascript''; else if( cssExpr.test( url ) ) type = ''text/css''; // Create the appropriate element. var tag = null; switch( type ){ case ''text/javascript'' : tag = document.createElement( ''script'' ); tag.type = type; tag.src = url; break; case ''text/css'' : tag = document.createElement( ''link'' ); tag.rel = ''stylesheet''; tag.type = type; tag.href = url; break; } // Insert it to the <head> and the array to ensure it is not // loaded again. document.getElementsByTagName("head")[0].appendChild( tag ); Array.add( includedFile, url ); }


La técnica que usamos en el trabajo es solicitar el archivo javascript utilizando una solicitud AJAX y luego eval () la devolución. Si está utilizando la biblioteca de prototipos, admiten esta funcionalidad en su llamada Ajax.Request.


No hay import / include / require en javascript, pero hay dos formas principales de lograr lo que desea:

1 - Puede cargarlo con una llamada AJAX y luego usar eval.

Esta es la forma más directa, pero está limitada a su dominio debido a la configuración de seguridad de Javascript, y el uso de eval abre la puerta a errores y ataques.

2 - Agregue una etiqueta de script con la URL de la secuencia de comandos en el HTML.

Definitivamente la mejor manera de ir. Puede cargar el script incluso desde un servidor externo, y está limpio ya que usa el analizador del navegador para evaluar el código. Puede colocar la etiqueta en el encabezado de la página web o en la parte inferior del cuerpo.

Ambas soluciones se discuten e ilustran aquí.

Ahora, hay un gran problema que debes conocer. Hacer eso implica que cargue el código de forma remota. Los navegadores web modernos cargarán el archivo y seguirán ejecutando su secuencia de comandos actual, ya que cargan todo de manera asincrónica para mejorar el rendimiento.

Significa que si usa estos trucos directamente, no podrá usar el código que acaba de cargar en la siguiente línea después de que solicitó que se cargue, ya que seguirá cargándose.

EG: my_lovely_script.js contiene MySuperObject

var js = document.createElement("script"); js.type = "text/javascript"; js.src = jsFilePath; document.body.appendChild(js); var s = new MySuperObject(); Error : MySuperObject is undefined

Luego recarga la página presionando F5. ¡Y funciona! Confuso...

Entonces, ¿qué hacer al respecto?

Bueno, puedes usar el truco que el autor sugiere en el enlace que te di. En resumen, para las personas que tienen prisa, utiliza en evento para ejecutar una función de devolución de llamada cuando se carga el script. Entonces puede poner todo el código usando la biblioteca remota en la función de devolución de llamada. P.EJ :

function loadScript(url, callback) { // adding the script tag to the head as suggested before var head = document.getElementsByTagName(''head'')[0]; var script = document.createElement(''script''); script.type = ''text/javascript''; script.src = url; // then bind the event to the callback function // there are several events for cross browser compatibility script.onreadystatechange = callback; script.onload = callback; // fire the loading head.appendChild(script); }

Luego, escribe el código que desea utilizar DESPUÉS de que el script se cargue en una función lambda:

var myPrettyCode = function() { // here, do what ever you want };

Entonces ejecutas todo eso:

loadScript("my_lovely_script.js", myPrettyCode);

Ok, lo tengo. Pero es doloroso escribir todo esto.

Bueno, en ese caso, puedes utilizar como siempre el fantástico framework jQuery gratuito, que te permite hacer lo mismo en una sola línea:

$.getScript("my_lovely_script.js", function() { alert("Script loaded and executed."); // here you can use anything you defined in the loaded script });


Puede escribir etiquetas de script dinámicas (usando Prototype ):

new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"});

El problema aquí es que no sabemos cuándo el archivo de script externo está completamente cargado.

A menudo queremos nuestro código dependiente en la siguiente línea y nos gusta escribir algo como:

if (iNeedSomeMore) { Script.load("myBigCodeLibrary.js"); // includes code for myFancyMethod(); myFancyMethod(); // cool, no need for callbacks! }

Existe una forma inteligente de inyectar dependencias de script sin necesidad de devoluciones de llamadas. Simplemente tiene que extraer el script a través de una solicitud AJAX sincrónica y evaluar el script a nivel global.

Si usa Prototype, el método Script.load se ve así:

var Script = { _loadedScripts: [], include: function(script) { // include script only once if (this._loadedScripts.include(script)) { return false; } // request file synchronous var code = new Ajax.Request(script, { asynchronous: false, method: "GET", evalJS: false, evalJSON: false }).transport.responseText; // eval code on global level if (Prototype.Browser.IE) { window.execScript(code); } else if (Prototype.Browser.WebKit) { $$("head").first().insert(Object.extend( new Element("script", { type: "text/javascript" }), { text: code } )); } else { window.eval(code); } // remember included script this._loadedScripts.push(script); } };


Sé que mi respuesta es un poco tarde para esta pregunta, pero, aquí hay un gran artículo en www.html5rocks.com - Profundizar en las aguas turbias de la carga de scripts .

En ese artículo se concluye que, en lo que respecta al soporte del navegador, la mejor forma de cargar dinámicamente el archivo JavaScript sin bloquear el procesamiento del contenido es la siguiente:

Teniendo en cuenta que tienes cuatro scripts llamados script1.js, script2.js, script3.js, script4.js entonces puedes hacerlo con la aplicación async = false :

[ ''script1.js'', ''script2.js'', ''script3.js'', ''script4.js'' ].forEach(function(src) { var script = document.createElement(''script''); script.src = src; script.async = false; document.head.appendChild(script); });

Ahora, dice Spec : Descarguen juntos, ejecuten en orden tan pronto como se descarguen.

Firefox <3.6, Opera dice: no tengo idea de qué es esta cosa "asincrónica", pero da la casualidad de que ejecuto scripts agregados a través de JS en el orden en que se agregan.

Safari 5.0 dice: entiendo "asincrónico", pero no entiendo establecerlo en "falso" con JS. Ejecutaré tus guiones tan pronto como aterricen, en el orden que sea.

IE <10 dice: No hay idea acerca de "asincrónico", pero hay una solución usando "onreadystatechange".

Todo lo demás dice: soy tu amigo, vamos a hacer esto por el libro.

Ahora, el código completo con la solución IE <10:

var scripts = [ ''script1.js'', ''script2.js'', ''script3.js'', ''script4.js'' ]; var src; var script; var pendingScripts = []; var firstScript = document.scripts[0]; // Watch scripts load in IE function stateChange() { // Execute as many scripts in order as we can var pendingScript; while (pendingScripts[0] && pendingScripts[0].readyState == ''loaded'') { pendingScript = pendingScripts.shift(); // avoid future loading events from this script (eg, if src changes) pendingScript.onreadystatechange = null; // can''t just appendChild, old IE bug if element isn''t closed firstScript.parentNode.insertBefore(pendingScript, firstScript); } } // loop through our script urls while (src = scripts.shift()) { if (''async'' in firstScript) { // modern browsers script = document.createElement(''script''); script.async = false; script.src = src; document.head.appendChild(script); } else if (firstScript.readyState) { // IE<10 // create a script and add it to our todo pile script = document.createElement(''script''); pendingScripts.push(script); // listen for state changes script.onreadystatechange = stateChange; // must set src AFTER adding onreadystatechange listener // else we’ll miss the loaded event for cached scripts script.src = src; } else { // fall back to defer document.write(''<script src="'' + src + ''" defer></''+''script>''); } }

Algunos trucos y minificación después, son 362 bytes

!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+'' src="''+s+''" defer></''+t+">"),a.src=s}(document,"script",[ "//other-domain.com/1.js", "2.js" ])


Si desea que se cargue un script SYNC , debe agregar texto de script directamente a la etiqueta HTML HEAD. Si lo agrega, activará una carga ASYNC . Para cargar texto de guión desde un archivo externo sincrónicamente, use XHR. Debajo de una muestra rápida (está usando partes de otras respuestas en esta y otras publicaciones):

/*sample requires an additional method for array prototype:*/ if (Array.prototype.contains === undefined) { Array.prototype.contains = function (obj) { var i = this.length; while (i--) { if (this[i] === obj) return true; } return false; }; }; /*define object that will wrap our logic*/ var ScriptLoader = { LoadedFiles: [], LoadFile: function (url) { var self = this; if (this.LoadedFiles.contains(url)) return; var xhr = new XMLHttpRequest(); xhr.onload = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { self.LoadedFiles.push(url); self.AddScript(xhr.responseText); } else { if (console) console.error(xhr.statusText); } } }; xhr.open("GET", url, false);/*last parameter defines if call is async or not*/ xhr.send(null); }, AddScript: function (code) { var oNew = document.createElement("script"); oNew.type = "text/javascript"; oNew.textContent = code; document.getElementsByTagName("head")[0].appendChild(oNew); } }; /*Load script file. ScriptLoader will check if you try to load a file that has already been loaded (this check might be better, but I''m lazy).*/ ScriptLoader.LoadFile("Scripts/jquery-2.0.1.min.js"); ScriptLoader.LoadFile("Scripts/jquery-2.0.1.min.js"); /*this will be executed right after upper lines. It requires jquery to execute. It requires a HTML input with id "tb1"*/ $(function () { alert($(''#tb1'').val()); });


Si ya ha cargado jQuery, debe usar $.getScript .

Esto tiene una ventaja sobre las otras respuestas aquí en que tiene una función de devolución de llamada incorporada (para garantizar que el script se cargue antes de que se ejecute el código dependiente) y puede controlar el almacenamiento en caché.


otra respuesta increíble

$.getScript("my_lovely_script.js", function(){ alert("Script loaded and executed."); // here you can use anything you defined in the loaded script });

https://.com/a/950146/671046


todas las principales bibliotecas de JavaScript como jscript, prototype, YUI tienen soporte para cargar archivos de script. Por ejemplo, en YUI, después de cargar el núcleo, puede hacer lo siguiente para cargar el control de calendario

var loader = new YAHOO.util.YUILoader({ require: [''calendar''], // what components? base: ''../../build/'',//where do they live? //filter: "DEBUG", //use debug versions (or apply some //some other filter? //loadOptional: true, //load all optional dependencies? //onSuccess is the function that YUI Loader //should call when all components are successfully loaded. onSuccess: function() { //Once the YUI Calendar Control and dependencies are on //the page, we''ll verify that our target container is //available in the DOM and then instantiate a default //calendar into it: YAHOO.util.Event.onAvailable("calendar_container", function() { var myCal = new YAHOO.widget.Calendar("mycal_id", "calendar_container"); myCal.render(); }) }, // should a failure occur, the onFailure function will be executed onFailure: function(o) { alert("error: " + YAHOO.lang.dump(o)); } }); // Calculate the dependency and insert the required scripts and css resources // into the document loader.insert();


Recientemente usé una versión mucho menos complicada con jQuery :

<script src="scripts/jquery.js"></script> <script> var js = ["scripts/jquery.dimensions.js", "scripts/shadedborder.js", "scripts/jqmodal.js", "scripts/main.js"]; var $head = $("head"); for (var i = 0; i < js.length; i++) { $head.append("<script src=/"" + js[i] + "/"></scr" + "ipt>"); } </script>

Funcionó muy bien en todos los navegadores en los que lo probé: IE6 / 7, Firefox, Safari, Opera.

Actualización: versión jQuery-less:

<script> var js = ["scripts/jquery.dimensions.js", "scripts/shadedborder.js", "scripts/jqmodal.js", "scripts/main.js"]; for (var i = 0, l = js.length; i < l; i++) { document.getElementsByTagName("head")[0].innerHTML += ("<script src=/"" + js[i] + "/"></scr" + "ipt>"); } </script>


Here hay uno simple con devolución de llamada y soporte de IE:

function loadScript(url, callback) { var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState) { //IE script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function () { callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () { //jQuery loaded console.log(''jquery loaded''); });


jquery resolvió esto para mí con su función .append () : lo usé para cargar el paquete jquery ui completo

/* * FILENAME : project.library.js * USAGE : loads any javascript library */ var dirPath = "../js/"; var library = ["functions.js","swfobject.js","jquery.jeditable.mini.js","jquery-ui-1.8.8.custom.min.js","ui/jquery.ui.core.min.js","ui/jquery.ui.widget.min.js","ui/jquery.ui.position.min.js","ui/jquery.ui.button.min.js","ui/jquery.ui.mouse.min.js","ui/jquery.ui.dialog.min.js","ui/jquery.effects.core.min.js","ui/jquery.effects.blind.min.js","ui/jquery.effects.fade.min.js","ui/jquery.effects.slide.min.js","ui/jquery.effects.transfer.min.js"]; for(var script in library){ $(''head'').append(''<script type="text/javascript" src="'' + dirPath + library[script] + ''"></script>''); }

Para usar : en la cabecera de html / php / etc después de importar jquery.js, simplemente incluiría este archivo como para cargar la totalidad de su biblioteca y anexarla a la cabeza ...

<script type="text/javascript" src="project.library.js"></script>