自分が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から読み込んだ場合のデモページ
　

【参考サイト】

• 自分がiframeの親か子かを判別する方法 | Zafiel