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

StackOverflow https://stackoverflow.com/questions/2227096

Question

I'm trying to close FancyBox from within the iframe, but parent.$ is always undefined. This is my 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 undefined when the iframe is in the same domain.

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

  • main page: //server.local/web/test/index.php
  • iframe page: //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.local is my home test server.

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

Was it helpful?

Solution 8

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.

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.

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

OTHER TIPS

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

parent.jQuery.fancybox.close();

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

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

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.$.fancybox will not work in this case.

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.

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

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.

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

I had to do this:

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

Got type error before.

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!!

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.

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

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.

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

type:'iframe'

When calling the fancybox, it solved my problem

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

Use this link in your iframe:

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

It works :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top