viernes, 14 de septiembre de 2012

Carga selectiva de JavaScript acorde con el Navegador

Interesante problema para resolver. Una funcionalidad de una página especifica no funciona apropiadamente en Chrome al parecer por la versión 1.7 de JQuery. La solución más sencilla es actualizar el sitio con la versión 1.8. Sin embargo por razones de tiempo y presupuesto, cambiar la versión de JQuery involucra probar el sitio de nuevo para validar que ninguna otra funcionalidad con dependencias de JQuery no se vieron afectadas.

La solución planteada entonces es cargar la versión 1.8 solamente en esa página, únicamente cuando el usuario usa el navegador Chrome. Para lograr esto hice un experimento primero (valga la nota de que deben haber soluciones más elegantes a esta) de colocar ambas versiones de JQuery en el HEAD para validar cuál versión de JQuery se utiliza si las dos están cargadas en la página. Algo así como determinar cuál es el orden de precedencia cuando hay funciones repetidas en dos scripts. Al parecer se invoca la última versión que se declara en el código.

Validado este experimento, programé un pequeño código, que con la ayuda de Yepnope, inyecto la versión 1.8 de JQuery cuando el navegador es Chrome.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <script src="yepnope.1.5.4-min.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript"> 
 $(document).ready(function() { 
  $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

  if($.browser.chrome){
   yepnope.injectJs("http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js", function () {
    alert ("JQuery Version: " + $().jquery);
   });   
  } else {
   alert ("JQuery Version: " + $().jquery);
  }
 });  
</script>
</body>
</html>

Corremos el script en FireFox:


Corremos el Script en Chrome:

No hay comentarios:

Publicar un comentario