Tengo una página html donde estoy agregando html dinámicamente a través de un javascript como el siguiente
<script type="text/javascript" src="/myapp/htmlCode"></script>
Quiero llamar a una función js, por ejemplo ,loadedContent (); una vez que el script anterior agrega html dinámico.
¿Alguien puede ayudarme cómo puedo hacer eso?
javascript
jquery
html
Neeraj
fuente
fuente
onload
está bien para las versiones de IE 9 y posteriores, por lo que la configuraciónonload
probablemente sea correcta para la mayoría de las personas ahoraonload
iniciará la devolución de llamada en el momento en que el script "CARGUE", no cuando haya finalizado su ejecución, lo cual es decepcionanteonload
posible que no se pueda llamar al controlador cuando el script no ha terminado de ejecutarse, porque Javascript es de un solo hilo. Esto significa que elonload
controlador solo se puede llamar ANTES de la ejecución del inicio del script o DESPUÉS de que haya finalizado la ejecución. Personalmente, nunca he visto que ocurra el primer caso ... NUNCA. Si alguien conoce un caso reproducible en el queonload
se pueda llamar al controlador ANTES de que el script comience a ejecutarse, infórmenos.function loadScripts (urls, callback) {var counter = 0 for (var i=0; i<urls.length; i++) { loadScript(urls[i], function () { if (++counter === urls.length) { callback() } }) } }
Tuve el mismo problema ... Mi solución (sin jQuery):
<script onload="loadedContent();" src ="/myapp/myCode.js" ></script>
fuente
prueba algo como esto
var script = document.createElement('script'); if(script.readyState) { //IE script.onreadystatechange = function() { if ( script.readyState === "loaded" || script.readyState === "complete" ) { script.onreadystatechange = null; alert(jQuery); } }; } else{//others script.onload = function() { alert(jQuery); } } script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" document.documentElement.appendChild(script);
fuente
Si está leyendo esta publicación en 2020, probablemente esté más acostumbrado a las promesas. Es preferible un enfoque más moderno si todos sus navegadores de destino son compatibles con ES6 o si está utilizando un polyfill.
Esta solución funciona como la respuesta de @JaykeshPatel , pero se basa en
Promise
s:// definition function loadScript(scriptUrl) { const script = document.createElement('script'); script.src = scriptUrl; document.body.appendChild(script); return new Promise((res, rej) => { script.onload = function() { res(); } script.onerror = function () { rej(); } }); } // use loadScript('http://your-cdn/jquery.js') .then(() => { console.log('Script loaded!'); }) .catch(() => { console.error('Script loading failed! Handle this error'); });
Puede pasar algunas variables contextuales en los argumentos de la
res
devolución de llamada, o si su biblioteca importó algún símbolo global, puede hacer referencia a él allí.Por ejemplo, dado que jQuery introduce el
$
símbolo global, puede llamarres($)
y crear un alcance local para él (perfecto si está usando TypeScript y no desea declarar una variable de módulo en cada archivo, de esta manera puede escribirconst $ = await loadScript(..)
).Si no quiere pasar ningún argumento, puede acortar su código de esta manera:
fuente
script.onLoad = res;
// simplificarreturn new Promise(res => script.onload = res)
. Pero asignar una función aonload
puede ser más fácil de leer y le permite pasar un argumento en la resoluciónen realidad, podría poner
loadedContent()
como la última línea del script que está cargando (que es una especie de concepto detrás de JSONP)fuente
Mi respuesta es una extensión de la respuesta de Jaykesh Patel . Implementé este código para cargar múltiples javascript . Espero que esto ayude a alguien:
// RECURSIVE LOAD SCRIPTS function load_scripts( urls, final_callback, index=0 ) { if( typeof urls[index+1] === "undefined" ) { load_script( urls[index], final_callback ); } else { load_script( urls[index], function() { load_scripts( urls, final_callback, index+1 ); } ); } } // LOAD SCRIPT function load_script( 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 ); debug("javascript included: "+url); } // EXAMPLE var main = function() { console.log("main function executed"); } var js = [ "path/to/script-1", "path/to/script-2", "path/to/script-3" ]; load_scripts( js, main );
fuente
Salida head.js . Logrará lo que busca, proporcionando devoluciones de llamada cuando su archivo (s) se haya cargado y ejecutado correctamente.
fuente
$.getScript("your script",function () { "your action"; });
fuente