Fancybox tidak berfungsi dengan jQuery v1.9.0 [f.browser tidak ditentukan / Tidak dapat membaca properti 'msie']

100

Fancybox putus dengan jQuery v1.9.0 baru.

Ini memengaruhi keduanya, Fancybox v1.3.4 dan yang lebih lama - dan - v2.1.3 ke bawah.

Kesalahan yang ditampilkan adalah:

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

... kesalahan lainnya

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'

Di 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

Jika Anda menggunakan ini untuk memanggil jQuery:

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

... salah satu implementasi fancybox Anda yang ada akan gagal !!

JFK
sumber
27
Dan itulah mengapa Anda tidak boleh menggunakan jquery-latest.jsdalam produksi!
jrummell
1
menggunakan versi terbaru dari fancybox 2.1.5 fancyapps.com/fancybox
Mukesh

Jawaban:

199

Sepertinya ada bug di jQuery yang dilaporkan di sini: http://bugs.jquery.com/ticket/13183 yang merusak skrip Fancybox.

Juga periksa https://github.com/fancyapps/fancyBox/issues/485 untuk referensi lebih lanjut.

Sebagai solusinya, kembalikan ke jQuery v1.8.3 saat bug jQuery diperbaiki atau Fancybox ditambal.


PEMBARUAN (Jan 16, 2013): Fancybox v2.1.4 telah dirilis dan sekarang berfungsi dengan baik dengan jQuery v1.9.0.

Untuk fancybox v1.3.4- Anda masih perlu melakukan rollback ke jQuery v1.8.3 atau menerapkan file skrip migrasi seperti yang ditunjukkan oleh jawaban @ Manu.


UPDATE (17 Jan 2013): Solusi untuk pengguna Fancybox v1.3.4 :

Tambal file file js fancybox agar berfungsi dengan jQuery v1.9.0 sebagai berikut:

  1. Buka jquery.fancybox-1.3.4.js (versi lengkap, bukan versi paket ) dengan editor teks / html.
  2. Temukan di sekitar baris 29 di mana dikatakan:

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

    dan ganti dengan ( EDITED 19 Maret 2013: filter yang lebih akurat):

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

    UPDATE (19 Maret 2013): Juga ganti $.browser.msiedengan navigator.userAgent.match(/msie [6]/i)sekitar baris 615 (dan / atau ganti semua $.browser.msiecontoh, jika ada), terima kasih joofow ... itu saja!

Atau unduh versi yang sudah ditambal dari SINI (DIPERBARUI 19 Maret 2013 ... terima kasih fairylee karena menunjukkan braket penutup ekstra)

CATATAN : ini adalah tambalan tidak resmi dan tidak didukung oleh penulis Fancybox, namun berfungsi sebagaimana mestinya. Anda dapat menggunakannya dengan risiko Anda sendiri;)

Secara opsional, Anda lebih suka melakukan rollback ke jQuery v1.8.3 atau menerapkan skrip migrasi seperti yang ditunjukkan oleh jawaban @ Manu.

JFK
sumber
1
Saya mengalami masalah yang sama muncul setelah menarik dari CDN API Perpustakaan Ajax Google di ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js . Ini menarik rilis jQuery terbaru 1.9.0 dan masalah muncul. Kami menarik rilis v1.8.3 dan menunjuknya di server web lokal dan semuanya sudah diperbaiki sekarang. Jelas, kami ingin menggunakan CDN tetapi tidak dengan mengorbankan menu slider dan hover kami.
JPC
Mengapa regex ditulis /msie [6]/i? - Kelas karakter [6]sama persis dengan karakter 6 , yaitu tanpa tanda kurung. Itu tidak menginspirasi banyak kepercayaan pada kode…: /
zrajm
1
@ ZrajmCAkfohg: Saya kira karena saya biasanya memvalidasi versi IE dari 6 hingga 8 [6-8]dan dalam hal ini hanya berjalan sebagai [6], pada akhirnya hanyalah konvensi sintaksis. Bagaimanapun, jika keduanya "sama persis", lalu bagaimana hal ini memengaruhi kepercayaan pada kode?!?! Jika hasil dengan atau tanpa tanda kurung berbeda dan menimbulkan kebingungan, maka saya setuju dengan Anda, jika tidak, saya tidak melihat komentar "... tidak menginspirasi kepercayaan ..." Anda sangat konstruktif. Saya lebih suka mendorong Anda untuk memposting jawaban Anda sendiri yang "membangkitkan rasa percaya diri".
JFK
1
Ini tidak memperbaiki masalah dengan membuka FancyBox untuk kedua kalinya ... Lihat halaman contoh ini di sini: wasen.net/testjq1.10.2.html
Anders
1
@basZero: itu adalah masalah yang sama sekali berbeda. Untuk yang Anda jelaskan, periksa groups.google.com/forum/#!topic/fancybox/-re22BoXOzM jika itu membantu
JFK
28

Hai, ini karena versi baru jQuery => 1.9.0

Anda dapat memeriksa pembaruan: http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

jQuery.Browser tidak digunakan lagi. Anda dapat mempertahankan versi terbaru dengan menambahkan skrip migrasi: http://code.jquery.com/jquery-migrate-1.0.0.js

ganti:

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

oleh :

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

di halaman Anda dan cara kerjanya.

Manu
sumber
+1 Menarik. Bagaimanapun kita semua harus mengedit sistem kita untuk melakukan versi rollback atau menerapkan tambalan untuk kode lama.
JFK
Menerapkan tambalan (jquery-migrate) tidak membantu menyelesaikan masalah ini dengan fancybox-1.3.4, jquery-1.11.3 dan jquery-migrate-1.2.1 ... Apakah ada solusi tambalan untuk ini tanpa perlu memutakhirkan ke Fancybox2 yang tidak gratis?
basZero
19

Peristiwa global juga tidak berlaku lagi.

Berikut tambalan, yang memperbaiki masalah browser dan acara:

--- 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
sumber
4
Dengan instruksi patching dari jawaban JFK saja, saya masih mengalami masalah saat mencoba membuka kotak inline untuk kedua kalinya, selalu menampilkan pesan kesalahan "Konten yang diminta tidak dapat dimuat. Silakan coba lagi nanti." alih-alih konten, yang ditampilkan dengan benar pada percobaan pertama. Menggunakan tambalan tambahan Anda (tidak begitu jelas) akhirnya berhasil.
Gurken Papst
1
Baru saja mencoba solusi ini dengan jQuery 1.10.2 dan tampaknya berhasil. Meskipun saya juga setuju, tidak jelas untuk memahami "tambalan" dalam jawaban ini.
Linglung
Ini adalah solusi yang bagus untuk siapa saja yang terjebak dengan versi lama Fancybox yang membutuhkan versi baru JQuery. Memperbaiki beberapa bug yang sangat membingungkan yang saya temui.
glenatron
4
Jika ada yang kesulitan menerapkan tambalan, inilah file yang diedit: pastebin.com/9R2VFVBQ
dloewen
4

Jika ada yang masih harus mendukung fancybox lama dengan jQuery 3.0+, berikut beberapa perubahan lain yang harus Anda lakukan:

.unbind () tidak digunakan lagi

Ganti semua contoh .unbind dengan.off

.removeAttribute () bukanlah sebuah fungsi

Ubah baris 580-581 untuk menggunakan jQuery's .removeAttr() sebagai gantinya:

Kode lama:

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

Kode baru:

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

Ini dikombinasikan dengan tambalan lain yang disebutkan di atas memecahkan masalah kompatibilitas saya.

Robert_QSS
sumber
Bagaimana Anda memperbaiki pernyataan ini? 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 ("filter"), f. get (0) .style.removeAttribute ("filter"))
Knocks X