1

OK、Facebookのjavascrip sdkがFB.Canvas.setSize（）を呼び出して、高さが「Settable」に設定されたiframeキャンバスアプリがあります。および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

ファンシーボックス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 に答える