Fancybox não funciona com jQuery v1.9.0 [f.browser is undefined / Não é possível ler a propriedade 'msie']

100

Fancybox rompe com o novo jQuery v1.9.0.

Afeta ambos, Fancybox v1.3.4 e inferior - e - v2.1.3 e inferior.

Os erros mostrados são:

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

... outros erros

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'

Na 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

Se você estiver usando isso para chamar jQuery:

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

... qualquer uma de suas implementações sofisticadas existentes irá falhar !!

JFK
fonte
27
E é por isso que você nunca deve usar jquery-latest.jsem produção!
jrummell de
1
use a versão mais recente do fancybox 2.1.5 fancyapps.com/fancybox
Mukesh,

Respostas:

199

Parece que existe um bug no jQuery relatado aqui: http://bugs.jquery.com/ticket/13183 que quebra o script Fancybox.

Verifique também https://github.com/fancyapps/fancyBox/issues/485 para mais referências.

Como solução alternativa, reverta para o jQuery v1.8.3 enquanto o bug do jQuery é corrigido ou o Fancybox é corrigido.


ATUALIZAÇÃO (16 de janeiro de 2013): Fancybox v2.1.4 foi lançado e agora funciona bem com jQuery v1.9.0.

Para o fancybox v1.3.4- você ainda precisa reverter para o jQuery v1.8.3 ou aplicar o script de migração conforme apontado pela resposta de @ Manu.


ATUALIZAÇÃO (17 de janeiro de 2013): Solução alternativa para usuários do Fancybox v1.3.4 :

Faça o patch do arquivo fancybox js para fazê-lo funcionar com jQuery v1.9.0 da seguinte maneira:

  1. Abra o arquivo jquery.fancybox-1.3.4.js (versão completa, não a versão do pacote ) com um editor de texto / html.
  2. Encontre ao redor da linha 29 onde diz:

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

    e substitua-o por ( EDITADO em 19 de março de 2013: filtro mais preciso):

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

    ATUALIZAÇÃO (19 de março de 2013): Substitua também $.browser.msiepela navigator.userAgent.match(/msie [6]/i)linha 615 (e / ou substitua todas as $.browser.msieinstâncias, se houver), obrigado joofow ... é isso!

Ou baixe a versão já corrigida de AQUI (ATUALIZADO em 19 de março de 2013 ... obrigado fairylee por apontar o colchete de fechamento extra)

NOTA : este é um patch não oficial e não é suportado pelo autor do Fancybox, mas funciona como está. Você pode usá-lo por sua própria conta e risco;)

Opcionalmente, você pode reverter para o jQuery v1.8.3 ou aplicar o script de migração conforme apontado pela resposta de @ Manu.

JFK
fonte
1
Tive o mesmo problema depois de extrair o CDN da API de bibliotecas Ajax do Google em ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js . Isso puxa a versão mais recente do jQuery 1.9.0 e o problema surge. Pegamos a versão v1.8.3 e apontamos para ela no servidor da web local e tudo está consertado agora. Obviamente, gostaríamos de usar o CDN, mas não à custa de quebrar nossos controles deslizantes e menus flutuantes.
JPC de
Por que a regex foi escrita /msie [6]/i? - A classe do personagem [6]é exatamente equivalente ao personagem 6 , ou seja, sem os colchetes. Isso não inspira muita confiança no código…: /
zrajm
1
@ZrajmCAkfohg: Acho que porque normalmente valido as versões do IE de 6 a 8 [6-8]e, neste caso, foi [6]apenas uma convenção de sintaxe no final. De qualquer forma, se eles são "exatamente equivalentes", como isso afeta a confiança no código?!?! Se o resultado com ou sem colchetes fosse diferente e isso deixasse espaço para confusão, então eu concordaria com você, caso contrário, não vejo seu comentário "... não inspira confiança ..." muito construtivo. Eu preferiria encorajá-lo a postar sua própria resposta "inspiradora".
JFK
1
Isso não corrige o problema de abrir o FancyBox uma segunda vez ... Veja esta página de exemplo aqui: wasen.net/testjq1.10.2.html
Anders
1
@basZero: esses são problemas completamente diferentes. Para aquele que você descreve, verifique groups.google.com/forum/#!topic/fancybox/-re22BoXOzM se isso ajudar
JFK
28

Olá, isso é devido à nova versão do jQuery => 1.9.0

você pode verificar a atualização: http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

jQuery.Browser está obsoleto. você pode manter a versão mais recente adicionando um script de migração: http://code.jquery.com/jquery-migrate-1.0.0.js

substituir:

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

de :

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

em sua página e seu funcionamento.

Manu
fonte
+1 interessante. Em qualquer caso, todos nós temos que editar nossos sistemas para fazer rollback da versão ou aplicar o patch para o código legado.
JFK de
Aplicar o patch (jquery-migrate) não ajuda a resolver este problema com fancybox-1.3.4, jquery-1.11.3 e jquery-migrate-1.2.1 ... Existem soluções de patch para isso sem a necessidade de atualização para o não-livre Fancybox2?
basZero
19

Os eventos globais também estão obsoletos.

Este é um patch que corrige os problemas do navegador e de eventos:

--- 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
fonte
4
Com as instruções de patch apenas da resposta de JFK, ainda tive problemas quando tentei abrir uma caixa embutida pela segunda vez, sempre exibindo a mensagem de erro "O conteúdo solicitado não pode ser carregado. Tente novamente mais tarde." em vez do conteúdo, que foi exibido corretamente na primeira tentativa. Usando seus patches adicionais (não tão óbvios) finalmente funciona.
Gurken Papst
1
Tentei esta solução com jQuery 1.10.2 e parece funcionar. Embora eu também concorde que não é óbvio entender o "patch" nesta resposta.
Daze de
Esta é uma ótima solução para quem está preso a uma versão antiga do Fancybox e precisa de uma nova versão do JQuery. Corrigido alguns bugs muito desconcertantes que eu estava encontrando.
glenatron
4
Se alguém tiver problemas para aplicar o patch, aqui está o arquivo com edições: pastebin.com/9R2VFVBQ
dloewen
4

No caso de alguém ainda ter que suportar o fancybox legado com jQuery 3.0+, aqui estão algumas outras mudanças que você terá que fazer:

.unbind () obsoleto

Substitua todas as instâncias de .unbindpor.off

.removeAttribute () não é uma função

Altere as linhas 580-581 para usar o jQuery .removeAttr():

Código antigo:

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

Novo Código:

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

Isso combinado com o outro patch mencionado acima resolveu meus problemas de compatibilidade.

Robert_QSS
fonte
Como você consertaria essa afirmação? 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"))
Bata em X de