FancyBox iframe 返回 parent.$ 为未定义（使用 WordPress）

Posted 2023-05-09

【中文标题】FancyBox iframe 返回 parent.$ 为未定义（使用 WordPress）

【英文标题】：FancyBox iframe returns parent.$ as undefined (using WordPress)

【发布时间】：2011-01-14 16:29:57

【问题描述】：

我正在尝试从 iframe 中关闭 FancyBox，但 parent.$ 始终是 undefined。 这是我的 iframe javascript：

 <script type='text/javascript' 
  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
 </script>
 <script type="text/javascript">
 jQuery(document).ready(function($)
     (function($) 
         $.fn.closeFancyBox = function() 
             $(this).click(function() 
                 parent.$.fancybox.close();
             );
         ;
      )(jQuery);
      $('#cancel').closeFancyBox();
      );
 );
 </script>

用alert('clicked'); 替换parent.$.fancybox.close(); 效果很好。当 iframe 在同一个域中时，我不明白为什么 parent.$ 是 undefined。

我使用的是 WordPress 2.9.1，带有 FancyBox for Wordpress 插件。

主页：//server.local/web/test/index.php iframe 页面：//server.local/web/test/wp-content/plugins/wp-test/test.htm

这些url中的第一个是主页，第二个是iframe页面； server.local 是我家的测试服务器。

有什么想法吗？如果有帮助，我可以粘贴整个源代码。

【参考方案1】：

它是未定义的，因为 WordPress 在noConflict 模式下运行 jQuery。改用这个：

parent.jQuery.fancybox.close();

noConflict 模式意味着$ 不等于 jQuery。您必须明确使用 jQuery 才能访问您通常可以使用 $ 访问的内容。

【讨论】：

对不起，应该说我知道这一点；我包含的 js 是一个 sn-p。我已经编辑了我的问题以反映这一点——传递 $ 意味着我不必使用“jQuery”。

@Aleksandr 在iframe 中传递$ 根本不会影响父页面。实际上，您在 iframe 中包含了一个完全独立的 jQuery 实例。如果你注意到你写的内容，你通过$，但引用parent.$。就好像你有 var a = 1; alert(obj.a); 你不会期望这两个项目引用相同的值，除非代码中的某处有赋值。

你是对的，这是有道理的。但是，使用以下代码：jQuery('#cancel').click(function() parent.jQuery.fancybox.close(); ); 我仍然在 Firebug 中收到 undefined 错误：parent.jQuery.fancybox is undefined。你知道为什么会这样吗？感谢您一直以来的帮助！总的来说，我对 JavaScript 和编码还是很陌生。

@Aleksandr 我现在正在工作，但我会在有机会时尝试解决方案并用结果更新我的答案。

【参考方案2】：

我的回答与 wordpress 无关，但一般来说是针对 fancybox 的。

在iframe中，如果你已经包含了主jquery脚本(jquery-1.5.2.min.js)，那么它会和主页面的那个和parent.$.fancybox冲突strong> 在这种情况下不起作用。

其他与 jquery 相关的东西（例如：选项卡）将在 iframe 内工作。 因此，新手程序员不会想到 iframe 中的第二个 jquery 脚本是恶棍。

【参考方案3】：

我必须这样做：

window.top.window.$.fancybox.close();

之前遇到过类型错误。

【参考方案4】：

parent.fancybox.close() 的任何变体都对我不起作用，一定是一些 lib 冲突。

这是我最新的fancybox的工作解决方法，你应该使用css显示属性而不是.hide()方法，因为在这种情况下fancybox将不会再次打开。

parent.jQuery('#fancybox-overlay').css('display', 'none');
parent.jQuery('#fancybox-wrap').css('display', 'none');

【讨论】：

有史以来最好的黑客。谢谢！

【参考方案5】：

这对我有用；）

<a href="javascript:parent.jQuery.fn.fancybox.close();" >

感谢这篇文章，它实际上给了我一些指导……我感觉很糟糕，因为我只花了几分钟，而且我知道 Fancybox for Wordpress 是多么令人沮丧！

【参考方案6】：

没有任何建议对我有用。我不得不使用以下代码解决它。 最新版本可能支持 parent.jQuery.fancybox.close();方法，但旧版本不适用于该方法。

对于使用旧版本插件/Jquery 的现有网站，试试这个

function close_window()

 $("#fancy_outer",window.parent.document).hide();
 $("#fancy_overlay",window.parent.document).hide();
 //window.top.window.$.fancybox.close(); this also does not work :(

您可以在 Iframe 内容中声明和使用函数 close_window。

【参考方案7】：

我遇到了同样的问题，发现我没有使用

type:'iframe'

调用fancybox时， 它解决了我的问题

【参考方案8】：

花了好几个小时试图调试它，但一无所获。 所以我用最新版本的 FancyBox 换掉了“FancyBox for WordPress”插件，它得到了修复。真的应该早点尝试。

在使用了 WordPress 及其各种插件一段时间后，我建议手动调用而不是依赖插件。它只是增加了另一层复杂性，如果您知道自己在做什么，就不需要在那里。

感谢 Doug 指出 WordPress 中 iframe 到父窗口 jQ​​uery 的适当语法。

【参考方案9】：

嗨， 任何在 Wordpress 3.0 中手动安装 Fancy Box 时无法关闭 Fancy Box iFrame 的人：

在您的 iframe 中使用此链接：

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>

它有效:)