Fancybox no funciona con jQuery v1.9.0 [f.browser no está definido / No se puede leer la propiedad 'msie']

100

Fancybox rompe con el nuevo jQuery v1.9.0.

Afecta tanto a Fancybox v1.3.4 como a continuación, y a la versión 2.1.3 y a continuación.

Los errores mostrados son:

v1.3.4:

Timestamp: 15/01/2013 10:03:28 AM
Error: TypeError: b.browser is undefined
Source File: ...fancybox/jquery.fancybox-1.3.4.pack.js
Line: 18

... otros errores

Uncaught TypeError: Cannot read property 'msie' of undefined jquery.fancybox-1.3.4.pack.js:18
Uncaught TypeError: Object [object Object] has no method 'fancybox'

En v2.1.3:

Timestamp: 15/01/2013 10:09:58 AM
Error: TypeError: $.browser is undefined
Source File: h.../fancybox2.1.3/jquery.fancybox.js
Line: 139

Si está usando esto para llamar a jQuery:

<script src="http://code.jquery.com/jquery-latest.js"></script>

... ¡¡ Cualquiera de sus implementaciones de fancybox existentes fallará !!

JFK
fuente
27
¡Y es por eso que nunca, nunca, debe usarlo jquery-latest.jsen producción!
jrummell
1
use la última versión de fancybox 2.1.5 fancyapps.com/fancybox
Mukesh

Respuestas:

199

Parece que existe un error en jQuery informado aquí: http://bugs.jquery.com/ticket/13183 que rompe el script Fancybox.

También consulte https://github.com/fancyapps/fancyBox/issues/485 para obtener más referencias.

Como solución alternativa, retroceda a jQuery v1.8.3 mientras se corrige el error de jQuery o se repara Fancybox.


ACTUALIZACIÓN (16 de enero de 2013): Fancybox v2.1.4 ha sido lanzado y ahora funciona bien con jQuery v1.9.0.

Para fancybox v1.3.4, aún necesita retroceder a jQuery v1.8.3 o aplicar el script de migración como se indica en la respuesta de @ Manu.


ACTUALIZACIÓN (17 de enero de 2013): solución para los usuarios de Fancybox v1.3.4 :

Parchear el archivo js FancyBox para que funcione con jQuery v1.9.0 de la siguiente manera:

  1. Abra el archivo jquery.fancybox-1.3.4.js (versión completa, no paquete ) con un editor de texto / html.
  2. Busque alrededor de la línea 29 donde dice:

    isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,

    y reemplácelo por ( EDITADO el 19 de marzo de 2013: filtro más preciso):

    isIE6 = navigator.userAgent.match(/msie [6]/i) && !window.XMLHttpRequest,

    ACTUALIZACIÓN (19 de marzo de 2013): También reemplace $.browser.msiepor navigator.userAgent.match(/msie [6]/i)alrededor de la línea 615 (y / o reemplace todas las $.browser.msieinstancias, si corresponde), gracias joofow ... ¡eso es!

O descargue la versión ya parcheada de AQUÍ (ACTUALIZADO el 19 de marzo de 2013 ... gracias fairylee por señalar el corchete de cierre adicional)

NOTA : este es un parche no oficial y no es compatible con el autor de Fancybox, sin embargo, funciona como está. Puede usarlo bajo su propio riesgo;)

Opcionalmente, puede revertir a jQuery v1.8.3 o aplicar el script de migración como se indica en la respuesta de @ Manu.

JFK
fuente
1
Tuve el mismo problema después de extraer el CDN de la API de Google Ajax Libraries en ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js . Esto saca la última versión de jQuery de 1.9.0 y surge el problema. Bajamos la versión v1.8.3, la apuntamos al servidor web local y todo está arreglado ahora. Obviamente, nos gustaría usar el CDN pero no a expensas de romper nuestros controles deslizantes y menús flotantes.
JPC
¿Por qué está escrita la expresión regular /msie [6]/i? - La clase de carácter [6]es exactamente equivalente al carácter 6 , es decir, sin los corchetes. Eso no inspira mucha confianza en el código…: /
zrajm
1
@ZrajmCAkfohg: Supongo que porque normalmente valido las versiones de IE de la 6 a la 8 [6-8]y en este caso fue como [6], al final es solo una convención de sintaxis. De todos modos, si son "exactamente equivalentes", ¿cómo afecta esto la confianza en el código?!?! Si el resultado con o sin paréntesis fue diferente y eso da lugar a confusión, entonces estaría de acuerdo con usted, de lo contrario, no veo su comentario "... no inspira confianza ..." muy constructivo en absoluto. Prefiero animarle a que publique su propia respuesta "inspiradora de confianza".
JFK
1
Sin embargo, esto no soluciona el problema de abrir FancyBox por segunda vez ... Vea esta página de muestra aquí: wasen.net/testjq1.10.2.html
Anders
1
@basZero: esos son temas completamente diferentes. Para el que usted describe, consulte groups.google.com/forum/#!topic/fancybox/-re22BoXOzM si eso ayuda
JFK
28

Hola, esto se debe a la nueva versión de jQuery => 1.9.0

puede consultar la actualización: http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

jQuery.Browser está obsoleto. puede mantener la última versión agregando un script de migración: http://code.jquery.com/jquery-migrate-1.0.0.js

reemplazar:

<script src="http://code.jquery.com/jquery-latest.js"></script>

por:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>

en su página y su funcionamiento.

Manu
fuente
+1 Interesante. En cualquier caso, todos tenemos que editar nuestros sistemas para hacer una versión revertida o aplicar el parche para el código heredado.
JFK
La aplicación del parche (jquery-migrate) no ayuda a resolver este problema con fancybox-1.3.4, jquery-1.11.3 y jquery-migrate-1.2.1 ... ¿Hay alguna solución de parcheo para esto sin la necesidad de actualizar? al Fancybox2 no gratuito?
basZero
19

Los eventos globales también están en desuso.

Aquí hay un parche, que corrige los problemas del navegador y del evento:

--- jquery.fancybox-1.3.4.js.orig   2010-11-11 23:31:54.000000000 +0100
+++ jquery.fancybox-1.3.4.js    2013-03-22 23:25:29.996796800 +0100
@@ -26,7 +26,9 @@

        titleHeight = 0, titleStr = '', start_pos, final_pos, busy = false, fx = $.extend($('<div/>')[0], { prop: 0 }),

-       isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,
+       isIE = !+"\v1",
+       
+       isIE6 = isIE && window.XMLHttpRequest === undefined,

        /*
         * Private methods 
@@ -322,7 +324,7 @@
            loading.hide();

            if (wrap.is(":visible") && false === currentOpts.onCleanup(currentArray, currentIndex, currentOpts)) {
-               $.event.trigger('fancybox-cancel');
+               $('.fancybox-inline-tmp').trigger('fancybox-cancel');

                busy = false;
                return;
@@ -389,7 +391,7 @@
                        content.html( tmp.contents() ).fadeTo(currentOpts.changeFade, 1, _finish);
                    };

-                   $.event.trigger('fancybox-change');
+                   $('.fancybox-inline-tmp').trigger('fancybox-change');

                    content
                        .empty()
@@ -612,7 +614,7 @@
            }

            if (currentOpts.type == 'iframe') {
-               $('<iframe id="fancybox-frame" name="fancybox-frame' + new Date().getTime() + '" frameborder="0" hspace="0" ' + ($.browser.msie ? 'allowtransparency="true""' : '') + ' scrolling="' + selectedOpts.scrolling + '" src="' + currentOpts.href + '"></iframe>').appendTo(content);
+               $('<iframe id="fancybox-frame" name="fancybox-frame' + new Date().getTime() + '" frameborder="0" hspace="0" ' + (isIE ? 'allowtransparency="true""' : '') + ' scrolling="' + selectedOpts.scrolling + '" src="' + currentOpts.href + '"></iframe>').appendTo(content);
            }

            wrap.show();
@@ -912,7 +914,7 @@

        busy = true;

-       $.event.trigger('fancybox-cancel');
+       $('.fancybox-inline-tmp').trigger('fancybox-cancel');

        _abort();

@@ -957,7 +959,7 @@
            title.empty().hide();
            wrap.hide();

-           $.event.trigger('fancybox-cleanup');
+           $('.fancybox-inline-tmp, select:not(#fancybox-tmp select)').trigger('fancybox-cleanup');

            content.empty();
sabel
fuente
4
Solo con las instrucciones de parcheo de la respuesta de JFK, todavía tenía problemas cuando intenté abrir un cuadro en línea por segunda vez, y siempre mostraba el mensaje de error "El contenido solicitado no se puede cargar. Vuelva a intentarlo más tarde". en lugar del contenido, que se mostró correctamente en el primer intento. Usando sus parches adicionales (no tan obvios) finalmente funciona.
Gurken Papst
1
Acabo de probar esta solución con jQuery 1.10.2 y parece funcionar. Aunque también estoy de acuerdo, no es obvio entender el "parche" en esta respuesta.
Daze
Esta es una gran solución para cualquiera que tenga una versión antigua de Fancybox que necesite una nueva versión de JQuery. Se corrigieron algunos errores muy desconcertantes con los que me estaba encontrando.
glenatron
4
Si alguien tiene problemas para aplicar el parche, aquí está el archivo con las modificaciones: pastebin.com/9R2VFVBQ
dloewen
4

En caso de que alguien todavía tenga que admitir el fancybox heredado con jQuery 3.0+, aquí hay algunos otros cambios que deberá realizar:

.unbind () obsoleto

Reemplazar todas las instancias de .unbindcon.off

.removeAttribute () no es una función

Cambie las líneas 580-581 para usar jQuery en su .removeAttr()lugar:

Código antiguo:

580: content[0].style.removeAttribute('filter');
581: wrap[0].style.removeAttribute('filter');

Nuevo código:

580: content.removeAttr('filter');
581: wrap.removeAttr('filter');

Esto combinado con el otro parche mencionado anteriormente resolvió mis problemas de compatibilidad.

Robert_QSS
fuente
¿Cómo arreglaría esta afirmación? b.showNavArrows? ((b.cyclic && 1 <h.length || 0! == s) && y.show (), (b.cyclic && 1 <h.length || s! = h.length-1) && z.show ( )) :( y.hide (), z.hide ())}, M = function () {a.support.opacity || (p.get (0) .style.removeAttribute ("filtro"), f. get (0) .style.removeAttribute ("filter"))
Knocks X