JavaScript: iframe への直接アクセスを回避する

「すぐ使えるCGI」をWebサイトに導入した時に、<iframe> （アイフレーム、インラインフレーム）を使って組み込むことがあります。

この場合、サイト外部から <iframe> 内のページに直接アクセスされてしまう可能性がありますので、直接アクセスされたときに、親ページに自動的にジャンプする JavaScript をご紹介します。

jQuery は使いません。

用途例

下記例が主な用途ですが、どのようなケースでも応用できます。

「すぐ使えるCMS」の短い一覧（新着リスト）をトップページに <iframe> で表示
「すぐ使えるメールフォーム」を <iframe> で表示

設定方法

1. 子ページの編集

設定は <iframe> で読み込まれる側のページに行います。読み込まれるページに該当するテンプレートをテキストエディタで開いて下さい。

編集対象ファイル例

「すぐ使えるCMS」の短い一覧：templates/article/short_list.html
「すぐ使えるメールフォーム」：templates/input.html

いずれのファイルの場合も、下記の通り2か所編集します。

i. JavaScript 関数を設定

下記の JavaScript コードを <head> と </head> の間に追加して下さい。ジャンプさせたい親ページが異なる場合、URLを変更して下さい（青字部分）。

コピー

<script type="text/javascript"><!--
function open_in_child(n){
        if (n == 0 && top.location.href == self.location.href){
            //親ページのURLに変更
            top.location.href='/index.html';
        }
        n++;
}
// --></script>

ii. スクリプトの実行を設定

<body> タグに追加した JavaScript 関数の実行を設定して下さい。「onLoad="open_in_child(0)"」を、bodyタグに指定します。

変更前例

コピー

<body>

変更後例

コピー

<body onLoad="open_in_child(0)">

ページ内で jQuery が使われている場合

ページ内に既に jQuery の $(document).ready() が指定されている場合は、上記の変更は行わず、代わりに、既存のコード内に下記の赤字部分を追加して下さい。

コピー

<script type="text/javascript">
$(document).ready(function() {
    /* 既存のコードがここにある */
    open_in_child(0);
});
</script>

2. アップロード

変更したテンプレートをサーバの同じ位置に上書きアップロードして下さい。

3. 再構築（「すぐ使えるCMS」のみ）

「すぐ使えるCMS」の場合、管理画面一覧から「再構築（テンプレート変更反映）」ボタンを押して下さい。最新のテンプレートを反映したファイルが書き出されます。

4. 動作確認

ブラウザのキャッシュをクリアして、フレーム内のページを直接ブラウザからリクエストして下さい。設定がうまくいっていれば、親ページに遷移します。

制限事項

期待通り動作しないブラウザもあります。