NOTES : 2011-05-17 : WEB

Facebookアプリ作成 – iFrame内での遷移

FacebookでiFrameでコンテンツを表示させる時に、スクロールバーを表示させないようにする事が多いのですが、その場合、縦に長いコンテンツから短いコンテンツに遷移したときに親ウィンドウのスクロール位置が変わらない為に、一瞬真っ白なページに行ったかと思う時があります。

通常の場合では、リンククリック時にjavascriptで親ウィンドウのスクロール位置を戻してあげるのですが、Facebookアプリの場合は表示されているページのドメインが違う為に、めんどくさい裏技を使わないとjavascript同士が連携できません。

そこで、簡単なやり方として、iFrameのトップ位置へのアンカーリンクで対応する方法があります。

$(function(){
     $("a").not("a[href^=http]").each(function(){
          var link = $(this);
          link.attr("href", link.attr("href")+"#fb-root");
     });
});

便利なのでjQuery前提で書いてます。httpで始まらないリンクのURLの後ろにFacebookで通常コンテンツエリアに使っている#fb-rootへのアンカーを追加します。

もちろん、#fb-rootじゃなくてiFrame内の最上部なら何でもOKです。

ただ、当然親ウィンドウのアンカーには移動しないので、Faccebookのヘッダが見えるところまではスクロールしませんので、条件に合わない場合はありますが、とりあえずは用途に足りるでしょう。

コメント (0件) - 表示・投稿 ▼

関連記事

No related posts.