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
            ];
        }
    },

Answer 3

我有同样的问题，我使用'centerOnScroll'：是的，现在它工作正常......

Answer 4

有同样的问题。值得庆幸的是fancybox可以通过CSS访问。我的解决方案是在我的CSS文件中覆盖fancybox的定位：

#fancybox-wrap {
    top:    20px !important;
}

此代码将fancybox始终放在iframe顶部20px处。如果您愿意，可以使用不同的尺寸。即使fancybox在运行时动态设置位置，！important也会设置此定位。

Answer 5

这是通过将Fancybox相对于另一个元素的位置进行定位来实现此目的的方法，在我的例子中是一个上传队列完成div，用于在用户上传图像后显示视图链接。

有一个带有设置ID的样式块，如下所示：

<style id="style-block">
body { background-color: #e7ebf2; overflow: hidden; }
</style>

然后打开Fancybox的链接调用具有图像名称，宽度和高度的函数来设置内容和大小。重要的是定位。通过获取队列的位置完成div，生成一个新的类声明（fancy-position），在fancybox加载之前将它附加到样式块（！class中的important将覆盖fancybox的定位），然后使用在fancybox选项中的wrapCSS参数，它将fancybox准确定位在我想要的位置。

function viewImage(image, width, height) {
    var complete_pos = $('#image_queue_complete').position();
    var css_code = '.fancy-position { top: ' + complete_pos.top.toString() + 'px !important; }';
    $('#style-block').append(css_code);
    var img_src = '<img src="images/' + image + '" width="' + width.toString() + '" height="' + height.toString() + '" />';

    $.fancybox({
        content: img_src,
        type: 'inline',
        autoCenter: false,
        wrapCSS: 'fancy-position'
    });
}

Facebook Canvas iFrame中的Fancybox定位

5 个答案: