javascript - multiple - load js script from js

Alternativa jQuery.getScript en JavaScript nativo

Question

Estoy intentando cargar scripts JS dinámicamente, pero usar jQuery no es una opción.

Comprobé la fuente de jQuery para ver cómo se implementó getScript para poder usar ese enfoque para cargar scripts usando JS nativo. Sin embargo, getScript solo llama a jQuery.get ()

y no he podido encontrar dónde se implementa el método get.

Entonces mi pregunta es

¿Cuál es una forma confiable de implementar mi propio método getScript usando JavaScript nativo?

¡Gracias!

Answer 1

Aquí hay una alternativa de jQuery getScript con funcionalidad de devolución de llamada:

function getScript(source, callback) {
    var script = document.createElement(''script'');
    var prior = document.getElementsByTagName(''script'')[0];
    script.async = 1;

    script.onload = script.onreadystatechange = function( _, isAbort ) {
        if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
            script.onload = script.onreadystatechange = null;
            script = undefined;

            if(!isAbort) { if(callback) callback(); }
        }
    };

    script.src = source;
    prior.parentNode.insertBefore(script, prior);
}

Answer 2

En primer lugar, gracias por la respuesta de @Mahn. Reescribí su solución en ES6 y prometo, en caso de que alguien lo necesite, pegaré mi código aquí:

const loadScript = (source, beforeEl, async = true, defer = true) => {
  return new Promise((resolve, reject) => {
    let script = document.createElement(''script'');
    const prior = beforeEl || document.getElementsByTagName(''script'')[0];

    script.async = async;
    script.defer = defer;

    function onloadHander(_, isAbort) {
      if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) {
        script.onload = null;
        script.onreadystatechange = null;
        script = undefined;

        if (isAbort) { reject(); } else { resolve(); }
      }
    }

    script.onload = onloadHander;
    script.onreadystatechange = onloadHander;

    script.src = source;
    prior.parentNode.insertBefore(script, prior);
  });
}

Uso:

const scriptUrl = ''https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoad&render=explicit'';
loadScript(scriptUrl).then(() => {
  console.log(''script loaded'');
}, () => {
  console.log(''fail to load script'');
});

y el código está eslinted

Answer 3

Puede buscar scripts como este:

(function(document, tag) {
    var scriptTag = document.createElement(tag), // create a script tag
        firstScriptTag = document.getElementsByTagName(tag)[0]; // find the first script tag in the document
    scriptTag.src = ''your-script.js''; // set the source of the script to your script
    firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag); // append the script to the DOM
}(document, ''script''));

Answer 4

utilizar esta

var js_script = document.createElement(''script'');
js_script.type = "text/javascript";
js_script.src = "http://www.example.com/script.js";
js_script.async = true;
document.getElementsByTagName(''head'')[0].appendChild(js_script);