Facebook页面的iframe中的Fancybox 2页面加载

问题描述：

I'm trying to make an application in a facebook page with the use of fancybox 2 where a page is loaded as an iframe in the fancybox. It works all fine, except in IE (who would've known!).

In my fancybox 2 there is a button that submits a form and sends you to another page. this page is loaded in the same fancybox window as the previous page. When this page is loaded, the height of the fancybox is not adjusted properly, so half of my page is not visible.

What I'm trying to do now is change the height of the fancybox iframe, but I'm already stuck on getting the actual size of the iframe.

here my javascript code in the last page that is loaded in the fancybox iframe:

$(document).ready(function() {
    var inner = $('.fancybox-inner');
    console.log(inner);
});

This console.log gives me 'null' back, which tells me this class does not exist in the page. I have also tried the following:

parent.$('.fancybox-inner');
parent.$('.fancybox-iframe');
$('.fancybox-iframe');
$.fancybox;
parent.fancybox;

my fancybox load:

$(document).ready(function() {
$(".uploadbox").fancybox({
    scrolling : 'no',
    preload   : true,
    type      : 'iframe',
    width     : '623px',
    height    : 'auto',
    autoSize  : true,
    afterLoad : function () { $.fancybox.update(); }, //this does not work
    closeBtn  : false,
        closeClick  : false,
        helpers     : { 
            overlay : {closeClick: false}
        }
    });
});

Any help would be greatly appreciated!

我正在尝试使用fancybox 2在Facebook页面中创建一个应用程序，其中页面被加载为 fancybox中的iframe。它工作得很好，除了IE（谁会知道！）。 p>

在我的fancybox 2中有一个提交表单并将您发送到另一个页面的按钮。此页面加载到与上一页相同的fancybox窗口中。加载此页面时，fancybox的高度未正确调整，因此我的页面的一半不可见。 p>

我现在要做的是改变高度 fancybox iframe，但我已经停留在获取iframe的实际大小。 p>

这里我的javascript代码在fancybox iframe中加载的最后一页： p> \ n

  $（document）.ready（function（）{
 var inner = $（'。fancybox-inner'）; 
 console.log（inner）; 
}）; \  n  code>  pre> 
 
 这个console.log给我'null'，告诉我这个类在页面中不存在。
我也尝试了以下内容： p  > 
 
 
 父$（ '的fancybox-内。 '）; 
parent $（' 的fancybox的iframe。 '）; 
 $的（' 的fancybox的iframe。'）; 
  $ .fancybox; 
parent.fancybox; 
  code>  pre> 
 
 我的fancybox加载： p> 
 
 
  $（document）.ready  （function（）{
 $（“。uploadbox”）。fancybox（{
 scrolling：'no'，
 preload：true，
 type：'iframe'，
 width：'623px'，
 高度：'auto'，
 autoSiz  e：true，
 afterLoad：function（）{$ .fancybox.update（）;  }，//这不起作用
 closeBtn：false，
 closeClick：false，
 helpers：{
 overlay：{closeClick：false} 
} 
}）; 
}）; 
   pre> 
 
 非常感谢任何帮助！ p> 
  div>

答

I have never managed to solve this issue. I'll explain to you why:

Facebook pages use an iframe to show your website into their website. To show another page into fancybox 2 you need to use an iframe too. Because an iframe in an iframe is always giving problems (cross browser and so on), there was no way to give the parent window the height of my fancybox, because of the double iframe. Since the app had to go live, I decided to give it a static height. In the future I will not use Fancybox 2 anymore or any of that matter, it's just one big misery inside Facebook.

答

You will need parent.jQuery.fancybox.resize(); or even window.parent.jQuery.fancybox.resize();

If i remember correctly, there was a specification on their site about this very issue.

Facebook页面的iframe中的Fancybox 2页面加载

相关推荐