Fancybox 不适用于 jQuery v1.9.0 [ f.browser 未定义/无法读取属性 'msie' ]

Fancybox doesn't work with jQuery v1.9.0 [ f.browser is undefined / Cannot read property 'msie' ]

提问by JFK

Fancybox breaks with the new jQuery v1.9.0.

Fancybox 打破了新的 jQuery v1.9.0。

It affects both, Fancybox v1.3.4 and below - and - v2.1.3 and below.

它同时影响 Fancybox v1.3.4 及以下 - 和 - v2.1.3 及以下。

The errors shown are :

显示的错误是：

v1.3.4 :

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

... other errors

...其他错误

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'

In v2.1.3 :

在 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

If you are using this to call jQuery :

如果您使用它来调用 jQuery ：

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

... any of your existing fancybox implementations will fail!!

...任何现有的fancybox实现都将失败！！

回答by JFK

It seems like it exists a bug in jQuery reported here : http://bugs.jquery.com/ticket/13183that breaks the Fancybox script.

似乎在 jQuery 中存在一个错误报告在这里：http://bugs.jquery.com/ticket/13183 打破了 Fancybox 脚本。

Also check https://github.com/fancyapps/fancyBox/issues/485for further reference.

另请查看https://github.com/fancyapps/fancyBox/issues/485以获取进一步参考。

As a workaround, rollback to jQuery v1.8.3while either the jQuery bug is fixed or Fancybox is patched.

作为一种解决方法，在修复 jQuery 错误或修补Fancybox时回滚到jQuery v1.8.3。

---

---

UPDATE(Jan 16, 2013): Fancybox v2.1.4has been released and now it works fine with jQuery v1.9.0.

更新（2013 年 1 月 16 日）：Fancybox v2.1.4已经发布，现在它可以与 jQuery v1.9.0 一起正常工作。

For fancybox v1.3.4- you still need to rollback to jQuery v1.8.3or apply the migration scriptas pointed out by @Manu's answer.

对于fancybox v1.3.4-您仍然需要回滚到jQuery v1.8.3或应用@Manu的回答所指出的迁移脚本。

---

---

UPDATE(Jan 17, 2013): Workaround for users of Fancybox v1.3.4:

更新（2013 年 1 月 17 日）：Fancybox v1.3.4用户的解决方法：

Patch the fancybox js fileto make it work with jQuery v1.9.0 as follow :

修补fancybox js 文件以使其与jQuery v1.9.0 一起使用，如下所示：

1. Open the jquery.fancybox-1.3.4.jsfile (full version, not pack version) with a text/html editor.

2. Find around the line 29 where it says :

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

   and replace it by (EDITEDMarch 19, 2013: more accurate filter):

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

   UPDATE(March 19, 2013): Also replace $.browser.msieby navigator.userAgent.match(/msie [6]/i)around line 615 (and/or replace all $.browser.msieinstances, if any), thanks joofow... that's it!

1. 使用 text/html 编辑器打开jquery.fancybox-1.3.4.js文件（完整版，不是打包版）。

2. 在第 29 行找到它说：

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

   并将其替换为（2013 年 3 月 19 日编辑：更准确的过滤器）：

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

   更新（2013 年 3 月 19 日）：也替换$.browser.msie为navigator.userAgent.match(/msie [6]/i)第 615 行左右（和/或替换所有$.browser.msie实例，如果有的话），谢谢joofow......就是这样！

Or download the already patched version from HERE(UPDATED March 19, 2013 ... thanks fairyleefor pointing out the extra closing bracket)

或者从这里下载已经打过补丁的版本（更新于 2013 年 3 月 19 日......感谢fairylee指出额外的右括号）

NOTE: this is an unofficial patch and is unsupported by Fancybox's author, however it works as is. You may use it at your own risk ;)

注意：这是一个非官方补丁，Fancybox 的作者不支持，但它按原样工作。您可以自行承担使用它的风险;)

Optionally, you may rather rollback to jQuery v1.8.3or apply the migration scriptas pointed out by @Manu's answer.

或者，您可能宁愿回滚到jQuery v1.8.3或应用@Manu的回答所指出的迁移脚本。

回答by Manu

Hi this is due to new version of the jQuery => 1.9.0

嗨，这是由于新版本的 jQuery => 1.9.0

you can check the update : http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

您可以检查更新：http: //blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

jQuery.Browser is deprecated. you can keep latest version by adding a migration script : http://code.jquery.com/jquery-migrate-1.0.0.js

不推荐使用 jQuery.Browser。您可以通过添加迁移脚本来保持最新版本：http: //code.jquery.com/jquery-migrate-1.0.0.js

replace :

代替 ：

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

by :

经过 ：

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

in your page and its working.

在您的页面及其工作中。

回答by sabel

Global events are also deprecated.

全局事件也已弃用。

Here's a patch, which fixes the browser and event issues:

这是一个补丁，它修复了浏览器和事件问题：

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

回答by Robert_QSS

In case anyone still has to support legacy fancybox with jQuery 3.0+ here are some other changes you'll have to make:

如果任何人仍然必须使用 jQuery 3.0+ 支持旧版fancybox，您还需要进行一些其他更改：

.unbind() deprecated

.unbind() 已弃用

Replace all instances of .unbindwith .off

替换的所有实例.unbind与.off

.removeAttribute() is not a function

.removeAttribute() 不是函数

Change lines 580-581 to use jQuery's .removeAttr()instead:

将第 580-581 行更改为使用 jQuery .removeAttr()：

Old code:

旧代码：

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

New code:

新代码：

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

This combined with the other patch mentioned above solved my compatibility issues.

这与上面提到的其他补丁相结合解决了我的兼容性问题。