Javascript | Cómo cargar jQuery y cualquier script dinámicamente

Escenario:

Supongamos que queremos cargar jQuery sólo cuando lo necesitamos, por ejemplo, si tenemos un Control de usuario, o una librería de funciones que hace uso de jQuery y no queremos depender de si el portal web en el que lo queremos incrustar ya ha realizado la carga de esta librería de javascript.

Solución:

Aunque es algo bastante sencillo, siempre tengo que buscarlo y cada vez que lo hago me encuentro soluciones “estrambóticas” que en vez de facilitar la vida, la complican más aún. Por eso, quería contribuir con la solución más eficaz a esta cuestión.

Comprobar si jQuery está cargado en nuestra página

Con un sencillo bloque condicional, podemos comprobar si jQuery está presente en nuestro entorno.

   1: if(jQuery) {

   2:    alert('jQuery está cargado');

   3: } else {

   4:    alert ('jQuery NO está cargado');

   5: }

 

Cargar jQuery dinámicamente

Haciendo uso de Javascript, cargaremos la librería jQuery de forma dinámica en el caso de que no estuviera presente en el sistema. Para ello, modificamos un poco el bloque condicional anterior para quedarnos únicamente con la opción en caso de que no estuviera cargado jQuery previamente

   1: if (!jQuery)

   2: {

   3:     (function(){

   4:       var newscript = document.createElement('script');

   5:          newscript.type = 'text/javascript';

   6:          newscript.async = true;

   7:          newscript.src = 'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js';

   8:       (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);

   9:     })();

  10: }

  11:  

 

Comprobar versión de jQuery

Si además necesitáramos comprobar que la versión de jQuery sea una específica o superior, podemos hacer uso de esta simple función.

   1: function CheckJQueryVersion(minimalVersion) {

   2:     // get version as a string and get rid of the periods. 

   3:     version = jQuery.fn.jquery.split('.').join('');

   4:     version2Check = minimalVersion.split('.').join('');

   5:     

   6:     version = parseInt(version);

   7:     if(version >= version2Check){

   8:         alert("Using version " + minimalVersion + " or greater");

   9:         return true;

  10:     }else{

  11:         alert("jQuery version is lower than " + minimalVersion);

  12:         return false;

  13:     }

  14: }

 

 

Espero que os sirva de ayuda, sobre todo ahora que el mundo web gira de forma esencial en torno a Javascript.