Facebookでよく使われるようになったインラインフレーム(iframe)の注意事項

Facebookでよく使われるようになったインラインフレーム(iframe)の注意事項

Posted at April 11,2011 1:55 AM
Tag:[Facebook, iframe, JavaScript]

これまでウェブサイトの制作であまり使ったことがなかったインラインフレーム(iframe)ですが、Facebookが登場してからiframeタブやソーシャルプラグインなどで利用するシーンが増えてきました。

ということで、インラインフレームについての注意事項をまとめてみました。

1.親フレームでインラインフレームのCSSは定義できない

Facebookのコメントボックスを黒背景のブログで使えるようにする」でも書きましたが、親フレームで定義したCSSはインラインフレームに適用されません。

サンプル1
サンプル1

サンプルの枠上部にある「foo」という文字と枠内(インラインフレーム)の「bar」という文字に対し、親フレームで同じスタイルを与えていますが、インラインフレームには反映されていないことが分かります。

CSSを反映できるのはiframe要素までです。

2.リンクターゲットに気をつけよう

iframe内ページのリンクにtarget属性を付与しないと、リンク先のコンテンツがフレーム内に表示されてしまいます。

次の例は、当Facebookページの「いいね!ランキング」のiframeタブページをサンプルにした失敗例です。

インラインフレームにあるリンクをクリック

適切なtarget属性を指定しないとリンク先のコンテンツがフレーム内に表示

このようなことにならないよう、適切なリンクターゲット(target属性)を設定しましょう。フレームを解除して表示する場合はtarget属性に「_top」を指定します。

各target属性の振る舞いについてはサンプルで確認してください。他のフレームに表示する方法も掲載しています。

サンプル2
サンプル3

iframe3.htmlというのは、次項のサンプルで登場でする、アクセス方法を確認するスクリプトを組み込んだページです。

3.インラインフレームで表示されているかどうかを確認するには

該当のページがブラウザから直接アクセスして表示されているのか、インラインフレームとして表示されているかを判断するには、JavaScriptで次のような判定を行います。

<script>
if(self == top){ 
  alert("直接アクセスしています");
} else {
  alert("インラインフレームでアクセスしています");
}
</script>

上記のスクリプトの動作は次のサンプルで確認できます。IE6でも動作します。

サンプル3-1(直接アクセスした場合)
サンプル3-1

サンプル3-2(インラインフレームでアクセスした場合)
サンプル3-2

iframeタブは外部ページで作成するので、何かの役に立つかもしれません(そもそもFacebookの機能で判断できるかもしれませんが)。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)