Fancybox不能与jQuery v1.9.0一起使用[f.browser未定义/无法读取属性'msie']

时间:2013-01-15 18:23:03

标签: jquery fancybox fancybox-2

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>

... 您现有的任何fancybox实施都会失败!!

4 个答案:

答案 0 :(得分:198)

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

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

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


更新(2013年1月16日):Fancybox v2.1.4 已经发布,现在可以正常使用jQuery v1.9.0。

对于fancybox v1.3.4-您仍然需要回滚到 jQuery v1.8.3 或应用@ strong指出的 migration script Manu的回答。


更新(2013年1月17日): Fancybox v1.3.4 用户的解决方法:

修补 fancybox js file ,使其与jQuery v1.9.0一起使用,如下所示:

  1. 使用text / html编辑器打开 jquery.fancybox-1.3.4.js 文件(完整版, not pack version )。
  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日):在第615行附近将$.browser.msie替换为navigator.userAgent.match(/msie [6]/i)(和/或替换所有$.browser.msie个实例(如果有) ,谢谢joofow ......就是这样!

  3. 或者下载已修补的版本 from HERE (2013年3月19日更新...感谢fairylee指出额外的结束括号)

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

    或者,您可能会回滚到 jQuery v1.8.3 或应用@Manu的回答所指出的 migration script

答案 1 :(得分:27)

嗨,这是因为新版本的jQuery =&gt; 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>

by:

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

在您的网页及其工作中。

答案 2 :(得分:18)

全球事件也已弃用。

这是一个补丁,用于修复浏览器和事件问题:

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

答案 3 :(得分:1)

如果有人仍然需要使用jQuery 3.0+支持传统的fancybox,那么您需要进行一些其他更改:

.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');

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