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

Posted 2023-05-07

技术标签:

【中文标题】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' ]Fancybox 不适用于 jQuery v1.9.0 [ f.browser 未定义 / 无法读取属性 'msie' ] 【发布时间】：2012-12-29 22:31:22 【问题描述】：

新的 jQuery v1.9.0 打破了 Fancybox。

它同时影响 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 实现都会失败！

【问题讨论】：

这就是为什么你应该永远在生产中使用jquery-latest.js！使用最新版本的fancybox 2.1.5 fancyapps.com/fancybox 【参考方案1】：

这里报告的 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 或应用@Manu 的回答所指出的migration script。~~

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

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

html

jquery.fancybox-1.3.4.js

非打包版

在第 29 行附近找到它说：

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

并将其替换为（EDITED 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 ...就是这样！

或下载已修补的版本from HERE（2013 年 3 月 19 日更新...感谢 fairylee 指出额外的右括号）

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

您也可以选择回滚到 jQuery v1.8.3 或应用 migration script，正如@Manu 的回答所指出的那样。

【讨论】：

从ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js 的 Google Ajax 库 API CDN 提取后，我遇到了同样的问题。这拉动了 1.9.0 的最新 jQuery 版本，问题就出现了。我们下载了 v1.8.3 版本并将其指向本地 Web 服务器，现在一切都已修复。显然，我们希望使用 CDN，但不能以破坏我们的滑块和悬停菜单为代价。为什么正则表达式写成/msie [6]/i？ -- 字符类[6] 完全等同于字符 6，即没有括号。这并不能激发人们对代码的信心……：/ @ZrajmCAkfohg ：我猜是因为我通常验证 IE 版本从 6 到 8 [6-8]，在这种情况下它只是作为 [6]，最后只是一个语法约定。无论如何，如果它们“完全等效”，那么这将如何影响对代码的信心？！？！如果带或不带括号的结果不同并且造成混淆的空间，那么我会同意你的观点，否则我看不到你的“......不会激发信心......”的评论非常有建设性。我宁愿鼓励你发表你自己的“鼓舞人心”的答案。这并不能解决第二次打开 FancyBox 的问题...请在此处查看此示例页面：wasen.net/testjq1.10.2.html @basZero ：这些是完全不同的问题。对于你描述的那个检查groups.google.com/forum/#!topic/fancybox/-re22BoXOzM如果有帮助【参考方案2】：

您好，这是由于新版本的 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>

在您的页面及其工作中。

【讨论】：

+1 有趣。在任何情况下，我们都必须编辑我们的系统以执行回滚版本或为遗留代码应用补丁。应用补丁 (jquery-migrate) 无助于解决 fancybox-1.3.4、jquery-1.11.3 和 jquery-migrate-1.2.1 的问题... 是否有任何补丁无需升级到非免费 Fancybox2 的解决方案？【参考方案3】：

全局事件也被弃用了。

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

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

【讨论】：

仅使用 JFK 答案中的修补说明，当我第二次尝试打开内联框时仍然遇到问题，始终显示错误消息“无法加载请求的内容。请稍后再试。 "而不是内容，在第一次尝试时正确显示。使用你的（不是那么明显的）附加补丁它终于可以工作了。刚刚用 jQuery 1.10.2 尝试了这个解决方案，它似乎有效。虽然我也同意理解这个答案中的“补丁”并不明显。对于那些需要新版本 JQuery 的人来说，这是一个很好的解决方案。修复了我遇到的一些非常令人困惑的错误。如果有人在应用补丁时遇到问题，这里是编辑过的文件：pastebin.com/9R2VFVBQ【参考方案4】：

如果有人仍然需要使用 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');

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

【讨论】：

你会如何修正这个说法？ b.showNavArrows?((b.cyclic&&1

以上是关于Fancybox 不适用于 jQuery v1.9.0 [ f.browser 未定义 / 无法读取属性 'msie' ]的主要内容，如果未能解决你的问题，请参考以下文章

表单验证成功后显示 Fancybox

Uncaught TypeError: jQuery(...).fancybox is not a function｜wordpress中使用的fancybox

jQuery FancyBox Iframe - 在fancybox 中使用$(document).ready？

jquery.fancybox.js 和 jquery.tabSlideOut.v1.3.js

IE中的jquery，fancybox

jQuery fancybox ie 无法显示关闭按钮