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 高度为 1058 像素，用户浏览器仅为 650 像素）。

有没有办法让 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' :true，现在它工作正常...

Answer 4

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

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

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

Answer 5

这是一种方法，通过相对于另一个元素的位置定位 Fancybox，在我的例子中是 Uploadify 队列完成 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'
    });
}