0

Actualmente estoy utilizando ésta popular función para cargar dinámicamente cualquier tipo de fichero javascript y ahora tengo la necesidad de comprobar previamente si la librería que va a cargar está o no previamente cargada.

        //Función carga de librería Jquery vía dinámica.
        var newjquery = 'url'; //Mi aplicación da la url a través de una variable.

        function loadScript(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);
        }



        loadScript(newjQuery, function() {
            // console.log('Librería cargada.');
            // Aquí ejecutamos el código que la librería necesitaba.
        });

¿Qué tengo que añadir para hacer lo que necesito?. ¿Se podría 'eliminar' del head dinámicamente ésta librería tal y como la hemos añadido?

3 respuestas 3

1

Lo más práctico es cargar cada librería asignándole un identificador, de esta manera simplificas las cosas ya que siempre sabes con exactitud qué script borrar.

Ejemplo

let scriptsList = document.getElementById('scripts');
let scripts = {
  jquery: {
    id: 'jquery',
    url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js',
    name: 'jQuery'
  },
  chartjs: {
    id: 'chart',
    url: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js',
    name: 'Chart'
  },
  pdfjs: {
    id: 'pdf',
    url: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.7.348/pdf.min.js',
    name: 'PDF'
  }
};

function test(btn, name) {
  let script = scripts[name];
  
  if (!btn.getAttribute('added')) {
    loadJS({
      id: script.id,
      url: script.url,
      callback: () => {
        let li = document.createElement('li');
        li.textContent = script.name;
        scriptsList.appendChild(li);

        btn.setAttribute('added', true);
        btn.textContent = btn.textContent.replace('Load', 'Remove');
      }
    });
  } else {
    removeJS(script.id, () => {
      let lis = scriptsList.querySelectorAll('li');
      let li = [].filter.call(lis, li => li.textContent === script.name)[0];
      scriptsList.removeChild(li);
      
      btn.removeAttribute('added');
      btn.textContent = btn.textContent.replace('Remove', 'Load');
    });
  }
}

/* Contenido del script de cargado dinámico */

function loadJS({
  id,
  url,
  callback
}) {
  // verificas que no esté cargada
  if (!isAlreadyJSLoaded(id)) {
    let script = document.createElement('script');
    document.body.appendChild(script);
    
    script.id = id;
    script.defer = true;
    script.onload = () => callback();
    script.src = url;
  }
}

function removeJS(id, cb) {
  // verificas que esté cargada
  if (isAlreadyJSLoaded(id)) {
    let script = document.getElementById(id);
    document.body.removeChild(script);
    
    if (cb) { cb(); }
  }
}

function isAlreadyJSLoaded(id) {
  let scripts = document.body.querySelectorAll('script');
  
  return [].filter.call(scripts, s => s.id === id).length === 1;
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


body {
  font-family: 'Open Sans';
}

h1 {
  color: #555;
  font-weight: 400;
}

li {
  color: #555;
  font-size: 14px;
}

button {
  border: 1px solid transparent;
  border-radius: 3px;
  color: #fff;
  font-family: 'Open Sans';
  height: 35px;
  padding: 0 12px;
}

button:first-of-type {
  background-color: #f39c12;
}

button:nth-of-type(2) {
  background-color: #2980b9;
}

button:last-of-type {
  background-color: #27ae60;
}
<h1>List of scripts:</h1>
<ul id="scripts"></ul>

<div style="margin-top: 25px; text-align: center">
<button onclick="test(this, 'jquery')">Load jQuery</button>
<button onclick="test(this, 'chartjs')">Load Chart.js</button>
<button onclick="test(this, 'pdfjs')">Load PDF.js</button>
</div>

1
  • 1
    Fantástico, esto es justo lo que necesito porque en un futuro no muy lejano iré ampliando las librerías así como su carga dinámica y su correspondiente retirada al 'salir de la página y entrar en otra'. Perfecto!.
    – Qadesh
    Commented el 6 mar. 2017 a las 19:40
0

podrías recorrer todos los scripts cargados en tu pagina y comparar contra la url que intentas cargar y en base a eso, insertar el script. Algo así:

var isLoaded = function(js_url) { 
  var scripts = document.getElementsByTagName('script');
  return Array.from(scripts) // transformo a un array
           .map(s => s.src) // Mapeo a un array con solos los src de los JS ya cargados
           .filter(url => url == js_url) // filtro las url que coincidan con el que se intenta cargar
           .length > 0 // si existe más de una, obvio, está cargada
}

y en tu función loadScript, al inicio revisar:

function loadScript(url, callback) {
  if (isLoaded(url)) {
    return callback();
  }

  var script = document.createElement("script")
  script.type = "text/javascript";
  [...]
}

Espero haber ayudado

saludos

0

Si quieres evaluar si fue cargada la librería, basta con revisar si existe dentro del espacio de nombres. Por ejemplo, para evaluar si se cargó la librería easing de jQuery debes hacer:

if ($.easing) { /* Código que depende de la librería */ }

(El nombre exacto va a depender de la librería)

Adicionalmente, tienes la opción de usar la función getScript de jQuery. Esta carga la librería en base a una url, y tiene métodos para gestionar la carga exitosa o errónea.

var url = 'http://dominio.com/scripts/libreria.js';
$.getScript(url).done(function(){
    // código que depende de la librería
}).fail(function(){
    // código que se ejecuta si la carga falló (ej: url incorrecta)
});

Si eliges esta opción, te sugiero habilitar la caché de esta función, entonces no te volverá a cargar una librería ya cargada. Para eso, antes de la línea que llama a $.getScript debes agregar:

$.ajaxSetup({ cache: true });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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