11

タブの iFrame 内で使用している Facebook アプリケーションを作成しました。

Javascript SDK の setAutoGrow 関数を使用して、コンテンツの最後まで iFrame を拡張しています。

私の観察によると、setAutoGrow 関数は IE7 では機能せず、その理由がわかりません。他のすべてのブラウザー (IE8 および 9 を含む) は正常に動作しています。

テスト目的で、高さ 1500px のグラデーションを作成しました。

高さ1500pxのテスト用グラデーションの例

例として、Chrome でどのように表示されるかを投稿します。ご覧のとおり、グラデーションは最後までスクロールできます (赤色):

iFrame タブ内のグラデーションは、通常のブラウザーで期待どおりに機能します

そして今、IE7で何が起こるかが来ます。iFrame のデフォルトの高さは 800px (アプリ設定で定義) です。「ターコイズ」で停止し、setAutoGrow 関数によって目的の高さ (1500px) まで拡張されていないことがわかります。

iFrame タブ内のグラデーションが IE7 で展開されない

私の CSS の重要な部分は次のようになります。

body, html { 
    overflow: hidden;        
    margin: 0; padding: 0;
}

    #wrapper {
        margin: 0 auto;
        width: 810px;    
    }

        #content {
          background: url(../img/bg.jpg) top left no-repeat;
          height: 1500px;
        }

そして、これは、body-tag の直前と fb-root タグの後に配置した JavaScript スニペットです。

window.fbAsyncInit = function() {

    FB.init({

        appId      : '...',
        channelUrl : '...',
        status     : true,
        cookie     : true,
        xfbml      : true

    });

    FB.Canvas.setAutoGrow();

};

FB によって閉じられた 8 月 1 日にさかのぼるバグ レポートを見つけました: https://developers.facebook.com/bugs/209607222498543?browse=search_5009002cb69058a73627413

次のトピックのヒントを読んで適用しました: Facebook iframe FB.Canvas.setAutoGrow は初期ロード後に自動拡張されませんか?

...しかし、何も問題を解決していないようです。

この問題の明白なヒント、私が監督したもの、または簡単な解決策/回避策を誰かが持っていますか?

IE7 DebugBar を使用しているときに、「dimension_context.php」という URL の読み込みに問題があることに気付きました。スクリーンショットを添付します。

IE7 DebugBar の読み込みの問題

4

3 に答える 3

1

私はこれを使用しています

<html>
<body>
    <div id="fb-root">
    </div>
    <script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript" language="javascript">
        FB.init({
            appId: 'APPID',
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true// parse XFBML
        });
        window.fbAsyncInit = function () {
            FB.Canvas.setSize();
        }
        //  FB.Canvas.setAutoResize();
        FB.Canvas.setAutoGrow(7);
    </script>
<form></form>

</body>
</html>
于 2012-08-17T12:24:10.140 に答える
1

ここで、私のタブが IE7 で動作していることがわかります。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script>
</head>
<body style="overflow:hidden">
<div id="fb-root"></div>
<!-- YOUR HTML -->
<script type="text/javascript">
window.fbAsyncInit = function () {
        FB.init({
            appId: 0000000000000, // App ID

            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0
            xfbml: true  // parse XFBML
        });

        FB.Canvas.setAutoGrow();
        FB.Canvas.setSize({ width: 810, height: 1417 });

    };



    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));
</script>
</body>
</html>

私のアプリの設定:

ページタブの幅: 810px
キャンバスの幅: 固定
キャンバスの高さ: 1147px で固定

タブをさまざまな高さに適応させたい場合は、各ページでこれを試してください。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script>
</head>
<body style="overflow:hidden">
<div id="fb-root"></div>
<!-- YOUR HTML -->
<script type="text/javascript">
$(document).ready(function(){
    window.fbAsyncInit = function () {
        FB.init({
            appId: 0000000000000, // App ID

            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0
            xfbml: true  // parse XFBML
        });

        FB.Canvas.setAutoGrow();
        FB.Canvas.setSize({ width: 810, height: $(document).height()});

    };



    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));

});
</script>
</body>
</html>

例をチェックしてください：

https://www.facebook.com/pages/Vpascoal/215529398504982?sk=app_105369212942645 (画像をクリック)

于 2012-08-17T15:52:54.073 に答える
1

ランダムな GET パラメータを追加して、all.js のキャッシュを破棄してみましたか? また、http:// の部分を // に書き換えて、Facebook が https モードの場合に JavaScript ファイルが正しく読み込まれるようにします。

<script type="text/javascript" language="javascript" src="//connect.facebook.net/en_US/all.js?v1"></script>
于 2012-08-21T13:04:51.767 に答える