Fancybox ไม่ทำงานกับ jQuery v1.9.0 [f.browser ไม่ได้กำหนด / ไม่สามารถอ่านคุณสมบัติ 'msie']

Fancybox แตกด้วย jQuery v1.9.0 ใหม่

มีผลกับทั้ง Fancybox v1.3.4 และต่ำกว่า - และ - v2.1.3 และต่ำกว่า

ข้อผิดพลาดที่แสดงคือ:

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

... ข้อผิดพลาดอื่น ๆ

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'

ใน 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

หากคุณกำลังใช้สิ่งนี้เพื่อเรียก jQuery:

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

... การใช้งานกล่องแฟนซีที่มีอยู่ของคุณจะล้มเหลว !!

ดูเหมือนว่ามีข้อผิดพลาดใน jQuery รายงานที่นี่: http://bugs.jquery.com/ticket/13183ที่ทำลายสคริปต์ Fancybox

ตรวจสอบhttps://github.com/fancyapps/fancyBox/issues/485สำหรับข้อมูลอ้างอิงเพิ่มเติม

ในการแก้ปัญหาชั่วคราวให้ย้อนกลับไปที่jQuery v1.8.3ในขณะที่ข้อบกพร่อง jQuery ได้รับการแก้ไขหรือ Fancybox ได้รับการแก้ไขแล้ว

อัปเดต (16 มกราคม 2013): Fancybox v2.1.4ได้รับการเผยแพร่และตอนนี้ทำงานได้ดีกับ jQuery v1.9.0

สำหรับ fancybox v1.3.4- คุณยังคงต้องย้อนกลับไปที่jQuery v1.8.3หรือใช้สคริปต์การย้ายข้อมูลตามที่คำตอบของ @ Manu ระบุ

อัปเดต (17 มกราคม 2556): วิธีแก้ปัญหาสำหรับผู้ใช้Fancybox v1.3.4 :

แก้ไขไฟล์ fancybox jsเพื่อให้ทำงานกับ jQuery v1.9.0 ดังต่อไปนี้:

1. เปิดไฟล์jquery.fancybox-1.3.4.js (เวอร์ชันเต็มไม่ใช่เวอร์ชันแพ็ค ) ด้วยโปรแกรมแก้ไขข้อความ / html

2. ค้นหารอบบรรทัด 29 ที่ระบุว่า:

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

   และแทนที่โดย ( แก้ไข 19 มีนาคม 2556: ตัวกรองที่แม่นยำยิ่งขึ้น):

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

   อัปเดต (19 มีนาคม 2556): แทนที่$.browser.msieด้วยnavigator.userAgent.match(/msie [6]/i)ประมาณบรรทัด 615 (และ / หรือแทนที่$.browser.msieอินสแตนซ์ทั้งหมดถ้ามี) ขอบคุณjoofow ... แค่นั้นเอง!

หรือดาวน์โหลดเวอร์ชันที่ได้รับการแก้ไขแล้วจากที่นี่ (อัปเดต 19 มีนาคม 2013 ... ขอบคุณfairylee ที่ชี้ให้เห็นวงเล็บปิดพิเศษ)

หมายเหตุ : นี่เป็นแพตช์ที่ไม่เป็นทางการและไม่ได้รับการสนับสนุนโดยผู้เขียนของ Fancybox อย่างไรก็ตามมันทำงานได้ตามที่เป็นอยู่ คุณอาจใช้มันโดยยอมรับความเสี่ยงเอง;)

คุณสามารถเลือกที่จะย้อนกลับไปที่jQuery v1.8.3หรือใช้สคริปต์การย้ายข้อมูลตามที่ระบุไว้ในคำตอบของ @ Manu

สวัสดีนี่เป็นเพราะ jQuery => 1.9.0 เวอร์ชันใหม่

คุณสามารถตรวจสอบการอัปเดต: http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

jQuery.Browser เลิกใช้แล้ว คุณสามารถใช้เวอร์ชันล่าสุดได้โดยเพิ่มสคริปต์การย้ายข้อมูล: http://code.jquery.com/jquery-migrate-1.0.0.js

แทนที่:

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

โดย:

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

ในเพจของคุณและใช้งานได้

นอกจากนี้ยังเลิกใช้งานกิจกรรมทั่วโลก

นี่คือโปรแกรมแก้ไขที่แก้ไขปัญหาเบราว์เซอร์และเหตุการณ์:

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

ในกรณีที่ใครก็ตามยังต้องรองรับ fancybox แบบเดิมด้วย jQuery 3.0+ ต่อไปนี้คือการเปลี่ยนแปลงอื่น ๆ ที่คุณต้องทำ:

.unbind () เลิกใช้งานแล้ว

แทนที่อินสแตนซ์ทั้งหมด.unbindด้วย.off

.removeAttribute () ไม่ใช่ฟังก์ชัน

เปลี่ยนบรรทัด 580-581 เพื่อใช้ jQuery .removeAttr()แทน:

รหัสเก่า:

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

รหัสใหม่:

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

สิ่งนี้รวมกับโปรแกรมแก้ไขอื่น ๆ ที่กล่าวถึงข้างต้นช่วยแก้ปัญหาความเข้ากันได้ของฉัน