Fancybox không hoạt động với jQuery v1.9.0 [f.browser là không xác định / Không thể đọc thuộc tính 'msie']


100

Fancybox phá vỡ với jQuery v1.9.0 mới.

Nó ảnh hưởng đến cả hai, Fancybox v1.3.4 trở xuống - và - v2.1.3 trở xuống.

Các lỗi được hiển thị là:

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

... lỗi khác

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'

Trong 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

Nếu bạn đang sử dụng điều này để gọi jQuery:

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

... bất kỳ triển khai hộp thư thích hiện có nào của bạn sẽ không thành công !!


27
Và đó là lý do tại sao bạn không bao giờ nên sử dụng jquery-latest.jstrong sản xuất!
jrummell

1
sử dụng phiên bản mới nhất của favourbox
Mukesh

Câu trả lời:


199

Có vẻ như nó tồn tại một lỗi trong jQuery được báo cáo tại đây: http://bugs.jquery.com/ticket/13183 làm hỏng tập lệnh Fancybox.

Ngoài ra, hãy kiểm tra https://github.com/fancyapps/fancyBox/issues/485 để tham khảo thêm.

Như một giải pháp thay thế, hãy quay lại jQuery v1.8.3 trong khi lỗi jQuery được sửa hoặc Fancybox được vá.


CẬP NHẬT (ngày 16 tháng 1 năm 2013): Fancybox v2.1.4 đã được phát hành và bây giờ nó hoạt động tốt với jQuery v1.9.0.

Đối với ưa thích v1.3.4- bạn vẫn cần phải quay lại jQuery v1.8.3 hoặc áp dụng tập lệnh di chuyển như được chỉ ra trong câu trả lời của @ Manu.


CẬP NHẬT (ngày 17 tháng 1 năm 2013): Giải pháp cho người dùng Fancybox v1.3.4 :

Vá các tập tin js Fancybox để làm cho nó làm việc với jQuery v1.9.0 như sau:

  1. Mở tệp jquery.fancybox-1.3.4.js (phiên bản đầy đủ, không phải phiên bản đóng gói ) bằng trình soạn thảo văn bản / html.
  2. Tìm xung quanh dòng 29 nơi nó nói:

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

    và thay thế nó bằng ( ĐÃ CHỈNH SỬA ngày 19 tháng 3 năm 2013: bộ lọc chính xác hơn):

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

    CẬP NHẬT (ngày 19 tháng 3 năm 2013): Cũng thay thế $.browser.msiebằng navigator.userAgent.match(/msie [6]/i)khoảng dòng 615 (và / hoặc thay thế tất cả$.browser.msie trường hợp, nếu có), cảm ơn joofow ... vậy là xong!

Hoặc tải xuống phiên bản đã được vá từ ĐÂY (CẬP NHẬT ngày 19 tháng 3 năm 2013 ... cảm ơn fairylee đã chỉ ra dấu ngoặc đóng thêm)

LƯU Ý : đây là bản vá không chính thức và không được tác giả của Fancybox hỗ trợ, tuy nhiên nó vẫn hoạt động bình thường. Bạn có thể tự chịu rủi ro khi sử dụng nó;)

Theo tùy chọn, bạn có thể khôi phục lại jQuery v1.8.3 hoặc áp dụng tập lệnh di chuyển như được chỉ ra trong câu trả lời của @ Manu.


1
Tôi đã gặp phải vấn đề tương tự sau khi lấy từ CDN của Google Ajax Libraries API tại ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js . Điều này kéo bản phát hành jQuery mới nhất là 1.9.0 và vấn đề xuất hiện. Chúng tôi đã kéo bản phát hành v1.8.3 xuống và trỏ đến nó trên máy chủ web cục bộ và mọi thứ hiện đã được khắc phục. Rõ ràng, chúng tôi muốn sử dụng CDN nhưng không phải phá vỡ các thanh trượt và menu di chuột của chúng tôi.
JPC

Tại sao regex được viết /msie [6]/i? - Lớp ký tự [6]hoàn toàn tương đương với ký tự 6 , tức là không có dấu ngoặc. Điều đó không truyền cảm hứng cho rất nhiều niềm tin vào mã ...: /
zrajm

1
@ZrajmCAkfohg: Tôi đoán là vì tôi thường xác thực các phiên bản IE từ 6 đến 8 [6-8]và trong trường hợp này, nó chỉ là [6], cuối cùng chỉ là một quy ước cú pháp. Dù sao, nếu chúng "hoàn toàn tương đương", thì điều này ảnh hưởng đến độ tin cậy trong mã như thế nào?!?! Nếu kết quả có hoặc không có dấu ngoặc khác nhau và điều đó tạo ra sự nhầm lẫn, thì tôi sẽ đồng ý với bạn, nếu không thì tôi không thấy nhận xét "... không truyền cảm hứng cho sự tự tin ..." của bạn rất có tính xây dựng. Tôi muốn khuyến khích bạn đăng câu trả lời "truyền cảm hứng tự tin" của riêng bạn.
JFK

1
Tuy nhiên, điều này không khắc phục được sự cố khi mở FancyBox lần thứ hai ... Xem trang mẫu này tại đây: wasen.net/testjq1.10.2.html
Anders

1
@basZero: đó là những vấn đề hoàn toàn khác. Đối với một trong những bạn mô tả, hãy kiểm tra groups.google.com/forum/#!topic/fancybox/-re22BoXOzM nếu điều đó có ích
JFK

28

Xin chào, đây là do phiên bản mới của jQuery => 1.9.0

bạn có thể kiểm tra bản cập nhật: http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

jQuery.Browser không được dùng nữa. bạn có thể giữ phiên bản mới nhất bằng cách thêm tập lệnh di chuyển: http://code.jquery.com/jquery-migrate-1.0.0.js

thay thế :

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

bởi:

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

trong trang của bạn và nó đang hoạt động.


+1 Thú vị. Trong mọi trường hợp, tất cả chúng ta đều phải chỉnh sửa hệ thống của mình để thực hiện phiên bản khôi phục hoặc áp dụng bản vá cho mã kế thừa.
JFK

Việc áp dụng bản vá (jquery-migrate) không giúp giải quyết vấn đề này với các bản vá lỗi ưa thích (như ưa thích), jquery-1.11.3 và jquery-migrate-1.2.1 ... Có giải pháp vá lỗi nào cho vấn đề này mà không cần nâng cấp vào Fancybox2 không miễn phí?
basZero

19

Các sự kiện toàn cầu cũng không được dùng nữa.

Đây là một bản vá, khắc phục các sự cố về trình duyệt và sự kiện:

--- 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();

4
Chỉ với hướng dẫn vá lỗi từ câu trả lời của JFK, tôi vẫn gặp sự cố khi cố mở hộp nội tuyến lần thứ hai, luôn hiển thị thông báo lỗi "Không thể tải nội dung được yêu cầu. Vui lòng thử lại sau". thay vì nội dung, được hiển thị đúng trong lần thử đầu tiên. Sử dụng các bản vá bổ sung (không quá rõ ràng) của bạn, nó cuối cùng cũng hoạt động.
Gurken Papst

1
Chỉ cần thử giải pháp này với jQuery 1.10.2 và nó có vẻ hoạt động. Mặc dù tôi cũng đồng ý rằng không rõ ràng để hiểu "bản vá" trong câu trả lời này.
Daze

Đây là một giải pháp tuyệt vời cho những ai gặp khó khăn với phiên bản Fancybox cũ cần phiên bản JQuery mới. Đã sửa một số lỗi rất khó hiểu mà tôi đang gặp phải.
glenatron

4
Nếu ai đó gặp sự cố khi áp dụng bản vá, đây là tệp có các chỉnh sửa: pastebin.com/9R2VFVBQ
dloewen

4

Trong trường hợp bất kỳ ai vẫn phải hỗ trợ hộp thư cũ với jQuery 3.0+, đây là một số thay đổi khác mà bạn sẽ phải thực hiện:

.unbind () không được dùng nữa

Thay thế tất cả các trường hợp của .unbind bằng.off

.removeAttribute () không phải là một hàm

Thay đổi dòng 580-581 để sử dụng jQuery's .removeAttr() thay thế:

Mã cũ:

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

Mã mới:

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

Điều này kết hợp với bản vá khác được đề cập ở trên đã giải quyết các vấn đề tương thích của tôi.


Bạn sẽ sửa câu lệnh này như thế nà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 ("filter"), f. get (0) .style.removeAttribute ("bộ lọc"))
Knocks X
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.