Fancybox 在 Facebook Canvas iFrame 中定位

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 尝试：

find:

_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() {

replace with

    _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”：true，现在它工作正常......

Answer 4

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

#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 加载之前将其附加到样式块（！类中的重要将覆盖 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'
    });
}