自分がiframeで読み込まれているかを判別する

iframe内から親ページに何か処理を行いたい時に、自分に親ページがあるかどうかを判別したかったので、実装方法を調べてみました。

iframeの親子間の操作に関しては以前記事を投稿していますので、そちらをご確認ください。
iframeの親から子、子から親の操作をする | cly7796.net

サンプルコード

#resultの中身をiframeから読み込まれている場合と読み込まれていない場合で変えるようにしてみます。

index.html

<p>index.html</p>
<div id="result"></div>

window == window.parent で判別できるようです。

JavaScript

// 自分自身が親(iframeで読み込まれていない場合)
if(window == window.parent) {
	document.getElementById('result').innerHTML = 'iframeで読み込まれていないです';

// 自分自身が親でない(iframeで読み込まれている場合)
} else {
	document.getElementById('result').innerHTML = 'iframeで読み込まれています';
}

#resultには「iframeで読み込まれていないです」と表示されました。
iframeから読み込んでいない場合のデモページ
 

次にindex.htmlをiframeで読み込んで表示させてみます。

frame.html

<p>frame.html</p>
<iframe src="index.html" frameborder="0" width="300" height="300"></iframe>

iframeから読み込むと「iframeで読み込まれています」と表示されました。
iframeから読み込んだ場合のデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31