2

tengo varios Cdn que me gustaría cargarlos solo cuando llamo a una función en especial, ahora mismo lo tengo en el head pero esto hace que que la web ralentice y se puede dar el caso de que tampoco se lleguen a necesitar esos Cdn. He haciendolo con documento.write pero no funciona.

<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
3
  • Ayudaría que agregues la función y el evento que la invocará
    – BetaM
    el 15 ene. 2021 a las 23:47
  • Hola, este link te será de ayuda ya qué muestra como ejecutar un script dinámicamente: stackoverflow.com/a/9413814/14536183
    – b3lg1c4
    el 15 ene. 2021 a las 23:52
  • Te recomiendo qué hagas el append al body.
    – b3lg1c4
    el 15 ene. 2021 a las 23:52

2 respuestas 2

4

Puedes cargar el script fácilmente y también ejecutar una función cuando se complete la carga.

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>

2
  • Gran respuesta, pero ¿no sería mejor hacer un if (typeof callback == "function")? Solo es una sugerencia el 16 ene. 2021 a las 0:20
  • @anythingg, gracias por la sugerencia, ya hice la modificación
    – Triby
    el 16 ene. 2021 a las 0:22
2

Puedes hacer esto de la siguiente manera

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

Esto hará que se inserte un <script> al momento de cargar la ventana

Puedes hacerlo con una función

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

inertar()

Si buscas insertarlo durante la ejecución de una función y después borrarlo, puedes guardarlo como una variable global y cuando se ejecute la función hacer un appendChild y luego de la función un removeChild

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

Llamaremos a la función y después de un timeout haremos que el elemento desaparezca del DOM

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.