Carga dinámicamente una librería jQuery, ¿cómo comprobar si antes está cargada?

publicado por: Anonymous

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?

solución

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

_x000D_

_x000D_

let scriptsList = document.getElementById('scripts');_x000D_
let scripts = {_x000D_
  jquery: {_x000D_
    id: 'jquery',_x000D_
    url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js',_x000D_
    name: 'jQuery'_x000D_
  },_x000D_
  chartjs: {_x000D_
    id: 'chart',_x000D_
    url: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js',_x000D_
    name: 'Chart'_x000D_
  },_x000D_
  pdfjs: {_x000D_
    id: 'pdf',_x000D_
    url: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.7.348/pdf.min.js',_x000D_
    name: 'PDF'_x000D_
  }_x000D_
};_x000D_
_x000D_
function test(btn, name) {_x000D_
  let script = scripts[name];_x000D_
  _x000D_
  if (!btn.getAttribute('added')) {_x000D_
    loadJS({_x000D_
      id: script.id,_x000D_
      url: script.url,_x000D_
      callback: () => {_x000D_
        let li = document.createElement('li');_x000D_
        li.textContent = script.name;_x000D_
        scriptsList.appendChild(li);_x000D_
_x000D_
        btn.setAttribute('added', true);_x000D_
        btn.textContent = btn.textContent.replace('Load', 'Remove');_x000D_
      }_x000D_
    });_x000D_
  } else {_x000D_
    removeJS(script.id, () => {_x000D_
      let lis = scriptsList.querySelectorAll('li');_x000D_
      let li = [].filter.call(lis, li => li.textContent === script.name)[0];_x000D_
      scriptsList.removeChild(li);_x000D_
      _x000D_
      btn.removeAttribute('added');_x000D_
      btn.textContent = btn.textContent.replace('Remove', 'Load');_x000D_
    });_x000D_
  }_x000D_
}_x000D_
_x000D_
/* Contenido del script de cargado dinámico */_x000D_
_x000D_
function loadJS({_x000D_
  id,_x000D_
  url,_x000D_
  callback_x000D_
}) {_x000D_
  // verificas que no esté cargada_x000D_
  if (!isAlreadyJSLoaded(id)) {_x000D_
    let script = document.createElement('script');_x000D_
    document.body.appendChild(script);_x000D_
    _x000D_
    script.id = id;_x000D_
    script.defer = true;_x000D_
    script.onload = () => callback();_x000D_
    script.src = url;_x000D_
  }_x000D_
}_x000D_
_x000D_
function removeJS(id, cb) {_x000D_
  // verificas que esté cargada_x000D_
  if (isAlreadyJSLoaded(id)) {_x000D_
    let script = document.getElementById(id);_x000D_
    document.body.removeChild(script);_x000D_
    _x000D_
    if (cb) { cb(); }_x000D_
  }_x000D_
}_x000D_
_x000D_
function isAlreadyJSLoaded(id) {_x000D_
  let scripts = document.body.querySelectorAll('script');_x000D_
  _x000D_
  return [].filter.call(scripts, s => s.id === id).length === 1;_x000D_
}

_x000D_

@import url('https://fonts.googleapis.com/css?family=Open+Sans');_x000D_
_x000D_
_x000D_
body {_x000D_
  font-family: 'Open Sans';_x000D_
}_x000D_
_x000D_
h1 {_x000D_
  color: #555;_x000D_
  font-weight: 400;_x000D_
}_x000D_
_x000D_
li {_x000D_
  color: #555;_x000D_
  font-size: 14px;_x000D_
}_x000D_
_x000D_
button {_x000D_
  border: 1px solid transparent;_x000D_
  border-radius: 3px;_x000D_
  color: #fff;_x000D_
  font-family: 'Open Sans';_x000D_
  height: 35px;_x000D_
  padding: 0 12px;_x000D_
}_x000D_
_x000D_
button:first-of-type {_x000D_
  background-color: #f39c12;_x000D_
}_x000D_
_x000D_
button:nth-of-type(2) {_x000D_
  background-color: #2980b9;_x000D_
}_x000D_
_x000D_
button:last-of-type {_x000D_
  background-color: #27ae60;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *