Facebook Canvas iFrame中的Fancybox定位

Question

好的,所以我有一个iframe画布应用程序,其高度设置为"可设置",facebook javascrip sdk调用FB.Canvas.setSize(); 和FB.Canvas.setAutoGrow(); .这些工作完美,因为iframe根据其内容设置为某个像素高度.

问题是当我打电话给Fancybox时,它根据这个高度定位自己.我知道这正是它应该做的事情,因为fancybox jQuery返回视口:

(jquery.fancybox-1.3.4.js最新版本的第673行):

_get_viewport = function() {
return [
    $(window).width() - (currentOpts.margin * 2),
    $(window).height() - (currentOpts.margin * 2),
    $(document).scrollTop() + currentOpts.margin
];
},

但问题是,对于很多观众而言,iframe将比浏览器窗口更长.因此,Fancybox将自己置于iframe中,并且最终只能被大多数观众看到.(即iframe高度为1058px,用户浏览器仅为650px).

有没有办法让fancybox只计算物理浏览器的高度？或者我是否需要更改我的Facebook画布应用程序中的某些设置才能使其正常工作？

我喜欢唯一的滚动条是Facebook上的那个(父母,如果你愿意的话).

所有建议非常感谢!

Answer 1

对于fancybox 2尝试:

找:

_start: function(index) {

并替换为:

_start: function(index) {
    if ((window.parent != window) && FB && FB.Canvas) {
        FB.Canvas.getPageInfo(
            function(info) {
                window.canvasInfo = info;
                F._start_orig(index);
            }
        );
    } else   {
        F._start_orig(index);
    }
},

_start_orig: function (index) {

然后在函数getViewport中替换return rez; 有:

if (window.canvasInfo) {
    rez.h = window.canvasInfo.clientHeight;
    rez.x = window.canvasInfo.scrollLeft;
    rez.y = window.canvasInfo.scrollTop - window.canvasInfo.offsetTop;
}

return rez;

最后在_getPosition函数替换行:

} else if (!current.locked) {

有:

} else if (!current.locked || window.canvasInfo) {

Answer 2

由于facebook js api提供页面信息,我们可以使用它,所以

找

    _start = function() {

用...来代替

    _start = function() {
        if ((window.parent != window) && FB && FB.Canvas) {
            FB.Canvas.getPageInfo(
                function(info) {
                    window.canvasInfo = info;
                    _start_orig();
                }
            );
        } else   {
            _start_orig();
        }
    },

    _start_orig = function() {

并修改_get_viewport函数

    _get_viewport = function() {
        if (window.canvasInfo) {
            console.log(window.canvasInfo);
            return [
                $(window).width() - (currentOpts.margin * 2),
                window.canvasInfo.clientHeight - (currentOpts.margin * 2),
                $(document).scrollLeft() + currentOpts.margin,
                window.canvasInfo.scrollTop - window.canvasInfo.offsetTop + currentOpts.margin
            ];
        } else {
            return [
                $(window).width() - (currentOpts.margin * 2),
                $(window).height() - (currentOpts.margin * 2),
                $(document).scrollLeft() + currentOpts.margin,
                $(document).scrollTop() + currentOpts.margin
            ];
        }
    },