29 de marzo de 2010

Cargar JS Dinámico (Dinámicamente)

Veamos un ejemplo de como cargar desde el cliente (JavaScript) un fichero .js externo que se encuentra en el servidor, usando peticiones GET HTTP.

Como Cargar JavaScript Externo desde JavaScript

Recientemente, a un colega se le dio la necesidad de dadas ciertas circunstancias, cargar un javascript u otro. Una solución pasaba por cargar ambos ficheros javascript, aún sabiendo que solo usaría una de los 2, es decir uno de ellos se cargaría innecesariamente, acarreando los derivados problemas de rendimientos.

La solución fue bastante sencilla, solo fue necesario usar jQuery y el método .getScript(), pero veamos un ejemplo. (Puedes ver una demo del ejemplo en el enlace Cargar JavaScript Dinámicamente)

jQuery getScript

Como siempre veamos un ejemplo de como usar el método .getScript() de jQuery. El ejemplo no tiene demasiado sentido, es solo para dar una idea de uso de este interesante método jQuery.

CargarJSImaginemos que tenemos una página web con 2 botones, el segundo botón realiza una acción para la cual hace uso de una función JavaScript que no se carga inicialmente con la pagina; y dicha función JavaScript se encuentra en un fichero .js que será cargado dinámicamente al hacer click en el primer botón (Cargar JS). Por ende, si hiciéramos click en el segundo botón (Ejecutar Acción) sin haber pinchado antes el  el primer botón (Cargar JS), pues el resultado no será el esperado.

Ver demo Cargar JavaScript Dinámicamente.

Código Ejemplo .getScript() de jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Ejemplo: Cargar JS Externo</title>
 
  <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 
  <script type="text/javascript">
    $(document).ready(function () {
 
      $('#btnCargarJs').click(function () {
        $.getScript('http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31');
      });
 
      $('#btnBlockPage').click(function () {
        $.blockUI({
          css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
          }
        });
 
        setTimeout($.unblockUI, 2000);
        return true;
      });
 
    });
  </script>
</head>
<body>
    <div>
      <div>Antes de ejecutar (Bloquear Pantalla), debemos (Cargar JS).</div><br />
      <input type="button" id="btnCargarJs" value="Cargar JS" />
      <input type="button" id="btnBlockPage" value="Bloquear Pantalla X 2 seg." />
    </div>
</body>
</html>

Nota: La función .getScript() de jQuery, además tiene un segundo parámetro, una función callback que es ejecutada después de descargado el fichero .js.

 

Artículos relacionados:

1 comentario:

  1. Muchas gracias amigo me ayudaste mucho, facil rapido y sencillo andaba batallando xlk de plano no se de esto..
    Muchas gracias.

    Atte.
    Ernesto Corral serkleros@hotmail.com

    ResponderEliminar