Fancybox ne fonctionne pas avec jQuery v1.9.0 [f.browser n'est pas défini / Impossible de lire la propriété 'msie']

100

Fancybox rompt avec le nouveau jQuery v1.9.0.

Il affecte à la fois Fancybox v1.3.4 et inférieur - et - v2.1.3 et inférieur.

Les erreurs affichées sont:

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

... autres erreurs

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'

Dans la 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 vous utilisez ceci pour appeler jQuery:

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

... n'importe laquelle de vos implémentations de fancybox existantes échouera !!

JFK
la source
27
Et c'est pourquoi vous ne devriez jamais, jamais utiliser jquery-latest.jsen production!
jrummell
1
utiliser la dernière version de fancybox 2.1.5 fancyapps.com/fancybox
Mukesh

Réponses:

199

Il semble qu'il existe un bogue dans jQuery signalé ici: http://bugs.jquery.com/ticket/13183 qui casse le script Fancybox.

Consultez également https://github.com/fancyapps/fancyBox/issues/485 pour plus d'informations.

Pour contourner le problème, revenez à jQuery v1.8.3 pendant que le bogue jQuery est corrigé ou que Fancybox est corrigé.


MISE À JOUR (16 janvier 2013): Fancybox v2.1.4 a été publié et fonctionne maintenant correctement avec jQuery v1.9.0.

Pour fancybox v1.3.4, vous devez toujours revenir à jQuery v1.8.3 ou appliquer le script de migration comme indiqué par la réponse de @ Manu.


MISE À JOUR (17 janvier 2013): solution de contournement pour les utilisateurs de Fancybox v1.3.4 :

Patcher le fichier js FancyBox pour le faire fonctionner avec jQuery v1.9.0 comme suit:

  1. Ouvrez le fichier jquery.fancybox-1.3.4.js (version complète, pas version pack ) avec un éditeur de texte / html.
  2. Trouvez autour de la ligne 29 où il est dit:

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

    et remplacez-le par ( EDITED 19 mars 2013: filtre plus précis):

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

    MISE À JOUR (19 mars 2013): Remplacez également $.browser.msiepar la navigator.userAgent.match(/msie [6]/i)ligne 615 (et / ou remplacez toutes les $.browser.msieinstances, le cas échéant), merci joofow ... c'est tout!

Ou téléchargez la version déjà corrigée ICI (MISE À JOUR le 19 mars 2013 ... merci fairylee pour avoir signalé le crochet de fermeture supplémentaire)

REMARQUE : il s'agit d'un patch non officiel et n'est pas pris en charge par l'auteur de Fancybox, mais il fonctionne tel quel. Vous pouvez l'utiliser à vos propres risques;)

Si vous le souhaitez, vous pouvez plutôt revenir à jQuery v1.8.3 ou appliquer le script de migration comme indiqué par la réponse de @ Manu.

JFK
la source
1
J'ai eu le même problème après avoir extrait le CDN de l'API Google Ajax Libraries à ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js . Cela extrait la dernière version de jQuery 1.9.0 et le problème surgit. Nous avons supprimé la version v1.8.3 et l'avons pointée sur le serveur Web local et tout est maintenant corrigé. Évidemment, nous aimerions utiliser le CDN, mais pas au détriment de nos curseurs et menus de survol.
JPC
Pourquoi le regex est-il écrit /msie [6]/i? - La classe de caractères [6]est exactement équivalente au caractère 6 , c'est-à-dire sans les crochets. Cela n'inspire pas beaucoup confiance dans le code…: /
zrajm
1
@ZrajmCAkfohg: Je suppose que parce que je valide normalement les versions IE de 6 à 8 [6-8]et dans ce cas, cela s'est simplement passé comme [6], à la fin, c'est juste une convention de syntaxe. Quoi qu'il en soit, s'ils sont "exactement équivalents", comment cela affecte-t-il la confiance dans le code?!?! Si le résultat avec ou sans crochets était différent et que cela laisse place à la confusion, alors je serais d'accord avec vous, sinon je ne vois pas votre commentaire "... n'inspire pas confiance ..." du tout très constructif. Je vous encourage plutôt à publier votre propre réponse «inspirante».
JFK
1
Cela ne résout pas le problème avec l'ouverture de la FancyBox une deuxième fois ... Voir cette page d'exemple ici: wasen.net/testjq1.10.2.html
Anders
1
@basZero: ce sont des problèmes complètement différents. Pour celui que vous décrivez, vérifiez groups.google.com/forum/#!topic/fancybox/-re22BoXOzM si cela vous aide
JFK
28

Salut, cela est dû à la nouvelle version du jQuery => 1.9.0

vous pouvez vérifier la mise à jour: http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

jQuery.Browser est obsolète. vous pouvez conserver la dernière version en ajoutant un script de migration: http://code.jquery.com/jquery-migrate-1.0.0.js

remplacer:

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

par :

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

dans votre page et son fonctionnement.

Manu
la source
+1 Intéressant. Dans tous les cas, nous devons tous éditer nos systèmes pour faire une version de restauration ou appliquer le correctif pour le code hérité.
JFK
L'application du correctif (jquery-migrate) n'aide pas à résoudre ce problème avec fancybox-1.3.4, jquery-1.11.3 et jquery-migrate-1.2.1 ... Y a-t-il des solutions de correctif à cela sans qu'il soit nécessaire de mettre à niveau à la Fancybox2 non-libre?
basZero
19

Les événements globaux sont également obsolètes.

Voici un correctif qui corrige les problèmes de navigateur et d'événements:

--- 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
la source
4
Avec les instructions de correction de la seule réponse de JFK, j'avais encore des problèmes lorsque j'ai essayé d'ouvrir une boîte en ligne une deuxième fois, affichant toujours le message d'erreur "Le contenu demandé ne peut pas être chargé. Veuillez réessayer plus tard." au lieu du contenu, qui était correctement affiché lors de la première tentative. En utilisant vos correctifs supplémentaires (pas si évidents), cela fonctionne enfin.
Gurken Papst
1
Je viens d'essayer cette solution avec jQuery 1.10.2 et cela semble fonctionner. Bien que je sois également d'accord, il n'est pas évident de comprendre le «patch» dans cette réponse.
Daze
C'est une excellente solution pour toute personne coincée avec une ancienne version de Fancybox qui a besoin d'une nouvelle version de JQuery. Correction de quelques bugs très déroutants que je rencontrais.
glenatron
4
Si quelqu'un a du mal à appliquer le correctif, voici le fichier avec les modifications: pastebin.com/9R2VFVBQ
dloewen
4

Si quelqu'un doit encore prendre en charge l'ancienne fancybox avec jQuery 3.0+, voici quelques autres modifications que vous devrez apporter:

.unbind () obsolète

Remplacez toutes les instances de .unbindpar.off

.removeAttribute () n'est pas une fonction

Modifiez les lignes 580-581 pour utiliser jQuery à la .removeAttr()place:

Ancien code:

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

Nouveau code:

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

Ceci combiné avec l'autre patch mentionné ci-dessus a résolu mes problèmes de compatibilité.

Robert_QSS
la source
Comment corrigeriez-vous cette affirmation? b.showNavArrows? ((b.cyclique && 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 ("filter"), f. get (0) .style.removeAttribute ("filter"))
Knocks X