Llamar a la función javascript después de que se cargue el script

81

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?

Neeraj
fuente

Respuestas:

140

puede lograr esto sin usar head.js javascript.

function loadScript( url, callback ) {
  var script = document.createElement( "script" )
  script.type = "text/javascript";
  if(script.readyState) {  // only required for IE <9
    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 );
}


// call the function...
loadScript(pathtoscript, function() {
  alert('script ready!'); 
});
Jaykesh Patel
fuente
6
Para su información: onloadestá bien para las versiones de IE 9 y posteriores, por lo que la configuración onloadprobablemente sea correcta para la mayoría de las personas ahora
Simon_Weaver
3
Note onloadiniciará la devolución de llamada en el momento en que el script "CARGUE", no cuando haya finalizado su ejecución, lo cual es decepcionante
Ma Dude
@MaDude ¿Puede consultar alguna documentación al respecto?
kontrollanten
2
Es onloadposible 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 el onloadcontrolador 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 que onloadse pueda llamar al controlador ANTES de que el script comience a ejecutarse, infórmenos.
GetFree
Una extensión simple para cargar una variedad de scripts: function loadScripts (urls, callback) {var counter = 0 for (var i=0; i<urls.length; i++) { loadScript(urls[i], function () { if (++counter === urls.length) { callback() } }) } }
sree
27

Tuve el mismo problema ... Mi solución (sin jQuery):

<script onload="loadedContent();" src ="/myapp/myCode.js"  ></script>
Didier68
fuente
2
Tenga en cuenta: Esto no será compatible con CSP estrictos.
Bradley
12

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);
socm_
fuente
11

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 Promises:

// 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 resdevolució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 llamar res($)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 escribir const $ = await loadScript(..)).

Si no quiere pasar ningún argumento, puede acortar su código de esta manera:

script.onload = res;
script.onerror = rej;
Cristian Traìna
fuente
1
script.onLoad = res;// simplificar
Kunukn
1
@Kunukn también hay uno más corto return new Promise(res => script.onload = res). Pero asignar una función a onloadpuede ser más fácil de leer y le permite pasar un argumento en la resolución
Cristian Traìna
4

en 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)

David Fregoli
fuente
4

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 );
Marco Panichi
fuente
1

Salida head.js . Logrará lo que busca, proporcionando devoluciones de llamada cuando su archivo (s) se haya cargado y ejecutado correctamente.

CerezaSaborPez
fuente
-2
  $.getScript("your script",function () {
      "your action";
  });
Gaspar Junior
fuente