Home / Questions / 421083
Accepted
Lorenzo Martín
Asked: 2022-01-16 15:44:15 +0800 CST 2022-01-16 15:44:15 +0800 CST

Insert Cdn when executing javascript function

  • 772

I have several Cdns that I would like to load only when I call a particular function, right now I have it in the head but this makes the web slow down and it may be the case that those Cdns are not needed either. I have done it with document.write but it doesn't work.

<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
javascript

2 Answers

  1. Best Answer

    You can easily upload the script and also run a function when the upload is complete.

    function loadJs(file, callback) {
  // Evitar cargar más de 1 vez
  if(document.querySelector(`script[src="${file}"]`)) {
    // Ya se cargó el script, solo se ejecuta la función de retorno
    if(typeof callback == 'function') {
      callback();
    }
  } else {
    // No se ha cargado, primero creas el elemento
    let script = document.createElement('script');
    // Si hay función de retorno
    if(typeof callback == 'function') {
      // Debe ejecutarse cuanto el script se haya cargado
      script.addEventListener('load', callback);
    }
    // Asignar ubicación del script
    script.src = file;
    // Agregar a <head>
    document.head.appendChild(script);
  }
}
/** Prueba */
let jqCdn = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';

// Escuchar clic en el botón
document.querySelector('#carga').addEventListener('click', () => {
    loadJs(jqCdn, () => {
        // Si se carga, debería poderse ejecutar este código
        $('#ocultar').fadeOut();
        $('#mostrar').fadeIn();
    });
});
    #ocultar { display:block; }
#mostrar { display:none; }
    <button id="carga">Cargar jQuery</button>
<div id="ocultar">Este div se debe ocultar</div>
<div id="mostrar">Este div se debe mostrar</div>

    • 4

  2. You can do this as follows

    window.addEventListener("load", () => {
  let script = document.createElement("script");
  script.setAttribute("src", "assets/js/vendor/jquery-slim.min.js");
  document.body.appendChild(script);
});

    This will cause a to be inserted <script>when loading the window

    You can do it with a function

    const inertar = () => {
  let elem = document.createElement("script");
  elem.setAttribute("src", "assets/js/vendor/jquery-slim.min.js");
  document.body.appendChild(script);
};

inertar()

    If you want to insert it during the execution of a function and then delete it, you can save it as a global variable and when the function is executed do a appendChildand after the function aremoveChild

    let script = document.createElement("script");
script.setAttribute("src", "assets/js/vendor/jquery-slim.min.js");

const insertar = () => {
  document.body.appendChild(script);
};

insertar();

setTimeout(() => {
  script.parentNode.removeChild(script);
}, 2500);

    We will call the function and after a timeoutwe will make the element disappear from the DOM

    • 2