位置：facebookキャンバス（iframe）で固定

位置：固定のDOMエレメントを持っており、facebookキャンバスアプリに流体キャンバスサイズで固定されています。アプリはキャンバスのiframeで実行されるため、CSSの位置の簡単な使用方法：fixedは機能しません。iframeのコンテンツには、周囲のFacebookページからのスクロールイベントは表示されません。位置：facebookキャンバス（iframe）で固定

これを解決するための最初のアプローチは、facebook apiにpingしてスクロール位置を取得することでした。これを$（document）.ready（）に入れます：

# refresh position of feedback button to simulate position:fixed in iframe 
refresh_timer = 1000 
move_button =() -> 
    # get scroll position from facebook 
    FB.Canvas.getPageInfo (info)-> 
    # animate button to new position with an offset of 250px 
    $('#fdbk_tab').animate({top: info.scrollTop+250}, 100) 
# start interval to do the refresh 
setInterval(move_button, refresh_timer)

一般にこれは機能します。ただし、facebook apiへの呼び出しがトリガーされると、ブラウザのリロードボタンとマウスカーソルが点滅するため、ユーザーエクスペリエンスが低下します。

これを改善する方法や他の方法を実装する方法については、iframe内で修正してください。

出典

2012-03-09 Nils Blum-Oeste

回避策として、固定高さキャンバスアプリに切り替えました。このように、iframeには独自のスクロールバーと位置があります。しかし、このアプローチにはいくつかの小さな欠点があります。だから私はまだ流体の高さのアプリで問題を解決するために何かができるかどうか興味があります。 –

同じ方法でFacebook iFrameの固定要素を配置しようとしましたが、新しい問題に直面しているようです - >開発者コンソールに表示されるのは "Uncaught SecurityError：原点" mydomain.com "アクセスするフレームは "document.domain"を "facebook.com"に設定しますが、アクセスを要求するフレームは同じではありません。 "あなたもこれに遭遇しましたか？ –

私はアプリのHTMLレイアウトを設定する方法と関係があると思われます。私はテストアプリで簡単なテストを行い、それがうまくいった。文書の本文には絶対位置指定のdivが含まれています。このdivにはposition：fixedのアンカーdivとスクロールが表示されるいくつかの単語が含まれています。あなたが仕事hereで例を見ることができます

<body> 
<div style="width: 300px; height: 2000px; position: absolute; top: 0; background-color: yellow;"> 
    <a href="www.google.com"> 
     <div style="width: 60px; height: 20px; background-color: #000; position: fixed; top: 20px;"> 
      ANCHOR 
     </div> 
     1words<br/> 
     1words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     2words<br/><br/><br/><br/> 
     2words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     3words<br/><br/><br/><br/> 
     3words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     4words<br/><br/><br/><br/> 
     4words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     words<br/> 
     words<br/><br/><br/><br/> 
    </a> 
</div>

（あなたがアプリにアクセスすることはできません何らかの理由を教えている場合、私はちょうど、国の制限を削除し、私がチェックされます：コードは次のようになります設定をもう一度）。

出典

2012-06-15 15:52:37

アプリが動作しない：「バウハウスアプリの使用が制限されましたバウハウスアプリからページを読み込んでいるときにエラーが発生しました。「 –

そのようなことが起こりそうです。私はこの月曜日にそれを修正しようとします、私がオフィスに戻るとき。一方、独自のテストアプリケーションをお持ちの場合は、必要に応じて、私が提供したコードで試してみてください。乾杯！ –

@nblumoe、まだ私のFacebookテストアプリのパーミッションを修正できませんでした。別のテストに使用する必要があります。私が提供した答えは助けになっていますか？コードを使用しようとしましたか？ –

最初の答えにコメントを要約するだけです.Rorok_89で提案された方法は、質問に記載されている正確なユースケースで実際には機能しません。 iframeでオーバーフローが有効になっている場合にのみ機能します。

私はOPによって尋ねられた質問を解決する方法を知らない。

出典

2012-09-06 22:38:33

位置：facebookキャンバス（iframe）で固定

答えて

関連する問題