【javascript】インラインフレームからのアクセスかどうかを判別する方法

公開日：2014/01/23

更新日：2014/01/23

カテゴリー: javascript

外部サイトに自サイトのページをインラインフレームで読み込まれたくない
インラインフレームで読み込む専用ページに、直接ブラウザからアクセスされたくない

などの理由で、インラインフレームからのアクセスかどうかを判別したいときがあります。

判別方法

インラインフレームからのアクセスかどうかを判別するにはjavascriptが有効です。

if(window != parent){
    //インラインフレームで読み込まれた場合の処理
} else {
    //インラインフレームで読み込まれていない時の処理（ブラウザでのアクセスの場合）
}

上記スクリプトをインラインフレームで読み込まれたくないページ（もしくは読み込みたいページ）に設置すれば判別が可能です。

あとは任意の処理をそれぞれの部分に書き込むだけです

解説

「window」は、上記スクリプトが設置されているページを意味します。

「parent」は、親ページを意味します。インラインフレームで読み込まれるページが子ページで、読み込むページが親ページとなります。

つまり「if(window != parent)」で、スクリプトがあるページが親ページかそうじゃないかを確認し、if構文で処理を分岐させています。

備考

javascriptを利用した判別方法なので、javascriptを無効にしているユーザーにはそもそも機能しないことに留意してください。

インラインフレームについては、インラインフレームと参照元についてを参照してください。

テスト

いちおう動作テストをしておきます。

【index.html：インラインフレームを設置するページ】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
インラインフレームを設置するページ
</title>
</head>
    <iframe src="iframe.html" height="300" width="300"></iframe>
</html>

【iframe.html：インラインフレームで読み込まれるページ】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
インラインフレームで読み込まれるページ
</title>
</head>
<script type="text/javascript">
<!--
if(window!=parent){
    document.write('インラインフレームで読み込まれています');
}
else if (window==parent){
    document.write('インラインフレームで読み込まれていないです');
}
// -->
</script>
</html>