facebook - Firefox でキャンバスからスクロールバーを削除する方法

Question

Firefox は、body を overflow:hidden に設定し、FB.Canvas.setAutoResize(); を実行しても、キャンバスにスクロールバーを追加しています。他のすべてのブラウザーはスクロールバーを非表示にします。ページからすべてのコンテンツを削除すると、スクロールバーが残ります。

サンプル: https://apps.facebook.com/fbtestapppb/

Answer 1

Facebook タイムラインの導入により、スクロール バーを削除してページ マージンを制御する方法が変更されました。最初に (そして最も重要なことですが)、ボディのパディングとマージンをすべてゼロに設定する必要があります。これにより、すべてのブラウザーが絶対ゼロからキャンバス設定を処理するようになります。

アプリ/ページ設定で設定した「ページ タブ幅」(520px または 810px) オプションに応じて、次のコードで幅を調整する必要があります。このブロックは、ページ ヘッドに配置する必要があります。

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Body タグのすぐ下に次のコードを追加します。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
window.fbAsyncInit = function() {
  FB.Canvas.setSize({ width: 520, height: 1000 });
}
</script>

「YOUR APP ID」を忘れずに変更してください。また、幅: 520 または 810 のいずれかに等しくなければなりません。

このソリューションは、IE、FF、Safari、Chrome でテスト済みです。

Answer 2

私はこの問題をそのように解決しました：

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

  window.fbAsyncInit = function() {
        FB.init({
          appId      : app_id, // App ID
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });         

       var height_doc = $(document).height()+20; 
       FB.Canvas.setSize({height: height_doc});
  };

それは私にとってはうまくいきます。お役に立てば幸いです。

Answer 3

これをCSSに追加したところ、うまくいったようです：

body {
    margin-top: -20px;
    padding-top: 20px;
}

ボディの上部にすでにパディングが追加されている場合は、おそらく 20px を追加する必要があります。

これは、Firefox が他のブラウザーとは異なる方法で本体の高さを測定するためだと思います。

ff8、chrome16、ie9 でテスト済みで、悪影響はありません。

Answer 4

これは、キャンバス アプリとページ タブの既知の問題であり、厄介なことにかなり前から存在しています。

https://developers.facebook.com/bugs/309917422436936

FB.Canvas.setSize({ width: 700, height: 800 });一部の人々は、使用できることなどに言及FB.Canvas.setAutoResize(500);し、問題を回避します。

アプリのコントロール パネルでも iframe の自動サイズ変更オプションを確実に設定しましたか?

Answer 5

body と html の余白は忘れてください (つまり、それらをゼロに設定します)。
すべてのコンテンツ (ヘッダーとフッターを含む) を単一セルのテーブルに配置するだけです。
少なくともすべてのブラウザは、テーブルの高さを計算する方法に同意します...

このような：

 <table id='m_table' width=100% align=left border=0 cellspacing=0 cellpadding=0>
    <tr><td valign=top bgcolor=white align=center style='position:relative;'>

そしてこれを行います：

setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);

IE、FireFox、Chrome/Safari で動作します...

必要な場合は、FB 初期化コードを次に示します。

window.fbAsyncInit = function() {
      FB.init({appId:'your_app_id',status:true,cookie:true,xfbml:true});fbApiInit = true;
      }

 function fbEnsureInit(callback)
  {
    if(!window.fbApiInit) setTimeout(function() {fbEnsureInit(callback);}, 50);
        else if(callback) callback();
  }
 fbEnsureInit(function() {
    FB.Canvas.scrollTo(0,0);
    var h = document.getElementById('m_table').offsetHeight+40;
   // console.log('setting size to '+h);
    FB.Canvas.setSize({height:h});
     setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);
  });