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

FancyBox iframe returns parent.$ as undefined (using WordPress)

提问by Aleksandr

I'm trying to close FancyBoxfrom within the iframe, but parent.$is always undefined. This is my iframe JavaScript:

我正在尝试从 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>

Replacing parent.$.fancybox.close();with alert('clicked');works just fine. I don't understand why parent.$is undefinedwhen the iframe is in the same domain.

替换parent.$.fancybox.close();为alert('clicked');工作就好了。我不明白为什么parent.$是undefined当iframe是在同一个域中。

I'm using WordPress 2.9.1, with the FancyBox for Wordpress plugin.

我正在使用 WordPress 2.9.1 和 FancyBox for Wordpress 插件。

• main page: //server.local/web/test/index.php
• iframe page: //server.local/web/test/wp-content/plugins/wp-test/test.htm

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

The first of these urls is the main page, the second is the iframe page; server.localis my home test server.

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

Any ideas? I can pastebin the entire source if it would be helpful.

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

采纳答案by Aleksandr

Spent quite a few hours trying to debug this and got nowhere. So I switched out the 'FancyBox for WordPress' plugin with the latest version of FancyBox, and it was fixed.Really should have tried that earlier.

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

After having spent some time with WordPress and its various plugins, I'd recommend calling things manually rather relying on plugins. It just adds another layer of complexity that, if you know what you're doing, doesn't need to be there.

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

Thanks to Doug for pointing out the appropriate syntax for iframe to parent window jQuery in WordPress.

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

回答by Doug Neiner

It is undefined because WordPress runs jQuery in noConflictmode. Use this instead:

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

parent.jQuery.fancybox.close();

noConflictmode means $does not equal jQuery. You have to explicitly use jQueryto access what you normally can access with $.

noConflict模式意味着$不等于 jQuery。您必须显式使用jQuery来访问您通常可以使用$.

回答by The Humble Coder

My answer is not related to wordpress, but one for fancybox in general.

我的答案与 wordpress 无关，而是与一般的fancybox 相关。

in the iframe, if you have included the main jquery script(jquery-1.5.2.min.js), then it will conflict with the one on the main page, and parent.$.fancyboxwill not work in this case.

在 iframe 中，如果你包含了主 jquery 脚本（jquery-1.5.2.min.js），那么它将与主页上的脚本冲突，并且 在这种情况下parent.$.fancybox将不起作用。

other jquery related stuff (like for eg: the tabs) will work inside the iframe. hence, it wont occur to a novice programmer that the second jquery script inside the iframe is the villain.

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

回答by TOBlender

I had to do this:

我不得不这样做：

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

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

Got type error before.

之前有类型错误。

回答by stasl

Any variations of parent.fancybox.close() didn't work for me, must be some lib conflict.

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

here is my working workaround for latest fancybox, you should use css display property instead of .hide() method as in that case fancybox will not open again.

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

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

回答by Hammad

I had the same problem and noticed that I am not using the

我遇到了同样的问题，并注意到我没有使用

type:'iframe'

When calling the fancybox, it solved my problem

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

回答by Michael

This works for me ;)

这对我有用;)

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

Thanks for this post, it actually guided me a little... I feel bad because it took me a only a few minutes and I KNOW how frustrating Fancybox for Wordpress is!!

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

回答by Anand P

None of the suggestions worked for me. I had to work around it using the following code. The latest version may be supporting the parent.jQuery.fancybox.close(); approach, but the older versions do not work with that.

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

For existing sites with older versions of the plugins/Jquery, try this

对于具有旧版本插件/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 :(
}

you could declare and use the function close_window within the Iframe content.

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

回答by dave

HI, Anyone who is having trouble closing a Fancy Box iFrame using a manual install of Fancy Box in Wordpress 3.0:

嗨，任何在 Wordpress 3.0 中手动安装 Fancy Box 时遇到问题的人：

Use this link in your iframe:

在您的 iframe 中使用此链接：

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

It works :)

有用 ：）