1

好的，所以我有一个 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 高度为 1058 像素，用户浏览器仅为 650 像素）。

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

我喜欢唯一的滚动条是 Facebook 上的滚动条（如果你愿意的话，是父级）。

非常感谢所有建议！

4

5 回答 5

11

对于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) {
于 2012-12-13T18:56:52.967 回答
5

由于 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
            ];
        }
    },
于 2012-03-29T23:21:22.613 回答
1

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

于 2012-03-18T04:38:54.640 回答
0

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

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

这段代码将fancybox 放置在距离iframe 顶部20px 处。如果您愿意，请使用不同的尺寸。!important 设置此位置，即使 fancybox 在运行时动态设置位置。

于 2011-11-03T13:37:52.690 回答
0

这是通过相对于另一个元素的位置定位 Fancybox 来做到这一点的一种方法，在我的例子中是一个 Uploadify 队列完成 div，它在用户上传图像后显示一个视图链接。

有一个带有集合 ID 的样式块，如下所示：

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

然后打开 Fancybox 的链接调用一个带有图像名称、宽度和高度的函数来设置内容和大小。重要的部分是定位。通过获取队列完成 div 的位置，生成一个新的类声明（fancy-position），在 fancybox 加载之前将其附加到样式块（！类中的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'
    });
}
于 2013-06-04T04:53:10.623 回答