javascript - Facebook Canvas アプリ (iFrame) のサイズを正しく変更するには?

Question

ページのコンテンツを更新した後、キャンバスのサイズを調整する必要があります。私はそれを明示的に行うことができます

FB.Canvas.setSize({ width: 760, height: 1480 });

ただし、パラメーターなしでは機能しません.setSize()。

また、私は高さを調整することができます

FB.Canvas.setAutoResize(true);

ただし、増加するだけです-コンテンツが縮小されても高さは縮小されません。

次の行は機能しません。

FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize());
FB.Canvas.setSize(FB.Canvas._computeContentSize());

どうすればそれを機能させることができますか？

この件に関するいくつかのコメント：

関連している：

Facebook Canvas アプリのサイズをどのように制御しますか?

score 7 · Accepted Answer

時間指定の自動サイズ変更用に独自の関数を作成しないでください。Fbには次の1つがあります：

FB.Canvas.setAutoResize();

サイズを変更する必要がある場合は、

FB.Canvas.setSize()

したがって、リンクをクリックしたときに小さくしたい場合は、それを関数に貼り付けてから、後でその関数を次のように呼び出します。

function sizeChangeCallback() {
    FB.Canvas.setSize();
  }

//start some function or on click event - here i used jquery
$("#something").click(function() {
  sizeChangeCallback()
});

明示的な高さを設定する必要はありませんが、コメントプラグインのような動的な xfbml 要素で問題が発生することがあります。イベントサブスクライブコールバックを使用してみてください。

   FB.Event.subscribe('xfbml.render', function(response) {
    FB.Canvas.setAutoResize();
  });

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/

http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

score 3 · Accepted Answer

.setSize()実行を遅らせることで、なんとか機能させることができました（さまざまなフォーラムで提案されているように）：

window.setTimeout(function() {
  FB.Canvas.setSize();
}, 250);

XFBLM特に要素がある場合はfb:comments、サイズを設定する前にページを解析する必要があります

window.setTimeout(function() {
  FB.XFBML.parse();
  FB.Canvas.setSize();
}, 250);

コンテンツブロックの後にこのスクリプトを実行する必要があることに注意してください。それ以外の場合は、時間間隔 (ミリ秒単位) を増やして、キャンバスのサイズを変更する前に Web サーバーとクライアントブラウザーがコンテンツのサイズを構築できるようにします。

このアプローチでは、ページの高さが増加するだけで、減少しません。上記のコードの前に次の行を実行することで、手動で減少させることができます

FB.Canvas.setSize({height: 480}); // min height - .setSize() won't reduce it

ただし、欠点があります。サイズ変更が 2 回行われるため、ページが点滅します。

また、.setSizeコンテンツの遅延を考慮して、いくつかの時間間隔で実行することをお勧めします。

FB.Array.forEach([300, 600, 1000, 2000], function(delay) {
  setTimeout(function() {
    FB.XFBML.parse();
    FB.Canvas.setSize();
  }, delay)
});

この場合、ページと XFBML 要素はかなり点滅します。

score 2 · Accepted Answer

iframe にはページにコンテンツを追加するページがあり、ユーザーはページ内のコンテンツをその場で更新できます。これらのケースでは、適切なときにコンテンツが縮小されないという同じことが見られました。

FB.Canvas.setSize() は、以下に示す _computeContentSize を呼び出します。

_computeContentSize: function() {
  var body = document.body,
      docElement = document.documentElement,
      right = 0,
      bottom = Math.max(
        Math.max(body.offsetHeight, body.scrollHeight) +
          body.offsetTop,
        Math.max(docElement.offsetHeight, docElement.scrollHeight) +
          docElement.offsetTop);

  if (body.offsetWidth < body.scrollWidth) {
    right = body.scrollWidth + body.offsetLeft;
  } else {
    FB.Array.forEach(body.childNodes, function(child) {
      var childRight = child.offsetWidth + child.offsetLeft;
      if (childRight > right) {
        right = childRight;
      }
    });
  }
  if (docElement.clientLeft > 0) {
    right += (docElement.clientLeft * 2);
  }
  if (docElement.clientTop > 0) {
    bottom += (docElement.clientTop * 2);
  }

  return {height: bottom, width: right};
},

問題のある行は次のとおりです。

bottom = Math.max(
      Math.max(body.offsetHeight, body.scrollHeight) +
        body.offsetTop,
      Math.max(docElement.offsetHeight, docElement.scrollHeight) +
        docElement.offsetTop);

iframe 内のコンテンツが縮小しても、body.offsetHeight の値は縮小されません。

これを解決するために、次のように高さについて docElement のみを参照する computeContentSize 関数のカスタムバージョンを作成しました。

function rfComputeContentSize() {
  var body = document.body,
      docElement = document.documentElement,
      right = 0,
      bottom = Math.max(docElement.offsetHeight, docElement.scrollHeight) + docElement.offsetTop;

  if (body.offsetWidth < body.scrollWidth) {
    right = body.scrollWidth + body.offsetLeft;
  } else {
    FB.Array.forEach(body.childNodes, function(child) {
      var childRight = child.offsetWidth + child.offsetLeft;
      if (childRight > right) {
        right = childRight;
      }
    });
  }
  if (docElement.clientLeft > 0) {
    right += (docElement.clientLeft * 2);
  }
  if (docElement.clientTop > 0) {
    bottom += (docElement.clientTop * 2);
  }

  return {height: bottom, width: right};
}

サイズを変更する必要があり、コンテンツが縮小する可能性があることがわかっている場合はいつでも、カスタム関数を使用してコンテンツを setSize に渡します (例: FB.Canvas.setSize(rfComputeContentSize()))。 ' 標準の FB.Canvas.setSize() 関数を使用します。

setAutoGrow() を使用していたことに注意してください。チェックはしていませんが、同じ関数を使用してサイズを決定していると想定しています。setAutoGrow() の呼び出しを無効にしたため、適切なタイミングで setSize() を呼び出すことに注意する必要があります。

このバグを Facebook に記録しました: https://developers.facebook.com/bugs/228704057203827

score 1 · Accepted Answer

FB.Canvasクロスドメイン JS セットアップで iframe の代わりに「IFRAME」を使用しているため、すべてが適切に初期化されていたにもかかわらず、関数が機能しないという問題に遭遇しました。

独自の createElement 関数のプロトタイプを作成し、それらの関数をオーバーライドすることで、これを修正しました。Facebook の all.js をインクルードした直後にこれを配置します。

document.__createElement = document.createElement;
document.createElement = function(tagName) {
            return document.__createElement(tagName.toLowerCase());
}

score 1 · Accepted Answer

少し余分な機能がありますが、この記事では動的にそれを行うことができない理由を説明し、最も簡単な解決策を提供します... http://www.twistermc.com/36764/shrink-facebook-tabs/ 答えは簡単です: 本当に小さくします、次に一時停止した後、AutoGrow を使用して正しいサイズにします... Alice in Wonderland スタイル。

開発者とユーザーの観点からすると、これにより約1/4秒遅くなり、ユーザーはスクロールバーの小さなフラッシュを取得するため、最も簡単だと言います...

score 0 · Accepted Answer

ボビーの答えはとても良いです。私が付け加える唯一のことは、次のことを行うことでページを縮小することに成功した人がいることです。

FB.Canvas.setSize({ width: 760, height: 10 });

そして、それに従ってください：

FB.Canvas.setAutoResize();

10 を使用する必要はありません。ページの最小サイズよりも小さいものを使用してください。その後、FB.Canvas.setAutoResize()再び適切な高さにして更新を続行する必要があります。再度呼び出す必要がFB.Canvas.setSize({ width: 760, height: 10 });あるのは、コンテンツが再び縮小した場合のみです。

これを行うことの危険性は、FB.Canvas.setAutoResize();が機能しない場合、コンテンツが途切れる可能性があることです。

score 0 · Accepted Answer

最小の高さにサイズ変更するときは、水平スクロールバーと一部のブラウザーが追加する余分なピクセルを考慮して、実際よりも少し大きくすることを忘れないでください。そうしないと、垂直スクロールになってしまいます。

bodyまた、高さを数えるために使用することはお勧めしません。

これは私のために働いた：

window.fbAsyncInit = function() 
{FB.Canvas.setSize({height:document.getElementById('m_table').offsetHeight+40});}

ここで、m_table はすべてのコンテンツを含むテーブル ID です (代わりに使用できますdiv)。

score 0 · Accepted Answer

アプリのサイズを変更しようとしましFB.Canvas.setSize(e);たが、サイズがまったく変更されませんでした。

Facebook Javascript を調べたところ、それが関数をFB.Canvas.setSize呼び出していることがわかりました。FB.Arbiter.inform('setSize',e)

コードから直接関数を呼び出すとFB.Arbiter.inform('setSize',{ width: 760, height: 1480 })、キャンバスのサイズが正しく変更されます。

score 0 · Accepted Answer

これはどれも私にとってはうまくいきませんでした。これは、終了タグの前に必ず入力してください。

<div id="fb-root"></div>
<script type="text/javascript"> 
 window.fbAsyncInit = function() {

 //Der folgende Code ändert die Grösse des iFrames alle 100ms 
FB.Canvas.setAutoResize(100);

};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
 '//connect.facebook.net/en_US/all.js';
 document.getElementById('fb-root').appendChild(e);  
 }());

</script>

score 0 · Accepted Answer

これは私のために働いています：

<script type='text/javascript'>
window.onload=function() {
  FB.Canvas.setSize({width:760,height:document.body.offsetHeight});
}
</script>

他の理由で使用しない限り、FB.init は必要ないことに注意してください。

javascript - Facebook Canvas アプリ (iFrame) のサイズを正しく変更するには?

10 に答える 10

Related

Reference