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.

Answer 1

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.