親窓へリンクを渡す小窓（サブウインドウ）を作る方法 [ホームページ作成] All About

サブウインドウからメインウインドウを制御

(小窓から親窓へリンクを送るイメージ) スクリプトを活用すると、右図のように、「サブウインドウ」（小窓）から、「メインウインドウ」（親窓）の表示ページを切り替えることができます。

これを活用して、ナビゲーション用（メニュー用）のサブウインドウ（小窓）を開いて、そこからのリンクで、メインウインドウ（親窓）の表示ページを切り替える仕組み「リモコンウインドウ」を作ってみましょう。

今回は、この「リモコンウインドウ」を実現する方法をご紹介致します。
実現にはJavaScriptを使うのですが、とても簡単にできます。

サブウインドウを開くには？

まずは、サブウインドウを開かなくてはいけませんね。
サブウインドウの作り方は、（JavaScriptガイドサイトの記事）「サブウインドウの位置等を指定」に詳しく書かれていますのでそちらをご参照頂きたいのですが、簡単に例を紹介すると、次のようなソースになります。

<a href="subwindow.htm" onClick="window.open('subwindow.htm', 'sample', 'width=300,height=150,scrollbars=1,resizable=1'); return false;">小窓を開く</a>

※a要素のonClickイベントにサブウインドウを開く指示を記述しています。サブウインドウで開くHTMLは、subwindow.htmファイル、ウインドウ名は sample、横幅は300ピクセルで高さは150ピクセルです。その他オプションの指定がありますが、詳しくは記事「サブウインドウの位置等を指定」をご参照下さい。
※return falseが必要な理由は後述。

上記のソースを表示させると、次のようになります。

小窓を開く

このリンクをクリックすると、サブウインドウが開きます。(※)
※JavaScriptが無効なら、サブウインドウは開かず、このウインドウ内に表示されます。

リンク先の表示をメインウインドウにするには？

さて、サブウインドウ内で表示しているページに、普通にリンクを記述していれば、そのリンク先はそのサブウインドウ内で表示されます。（サブウインドウを開いた呼び出し元の）メインウインドウには表示されません。

a要素に target属性を使って、例えば「 target=_blank 」と記述すれば(※)、新しい別のウインドウにリンク先を表示することはできます。しかし、メインウインドウ側にリンク先を表示することはできません。
※例えば、「<a href="hoge.htm" target="_blank">リンク</a>」など。

では、どうすれば、サブウインドウからメインウインドウの表示ページを切り替えられるでしょうか？

opener.location.href

実はとっても簡単で、JavaScriptを使って、次のような1行を記述するだけです。

opener.location.href = 'sample.htm';

これで、メインウインドウ側に sample.htm が表示されます。
これを、HTML中に記述する際には、次のようにします。

<a href="abc.htm" onClick="opener.location.href='abc.htm'; return false;">リモコン ウインドウ</a>

※a要素のonClickイベントに、メインウインドウ(親窓)でリンクを開く指示を記述しています。 JavaScriptが無効だと、現在のウインドウ(子窓)で開きます。（JavaScript部分ではなく、href属性で指定した部分が機能します。）
※abc.htm：リンク先のHTMLファイルです。
※return false：この記述が必要な理由は後述。

補足：opener.location.href

「 opener.location.href 」について、簡単に説明しておきます。
JavaScriptを使ってリンクを実現する場合、次のようなコードを記述します。

location.href = 'sample.htm';

「 location.href 」にリンク先のURLを代入すれば、現在のウインドウで表示しているページを変化させられます。

opener.location.href = 'sample.htm';

この「 location.href 」の頭に「 opener 」を加えると、メインウインドウで表示しているページを変化させられるようになります。
とても簡単ですね。

サンプル

上記のソースを、サブウインドウで表示させるページ内に記述することで、リンク先をメインウインドウに表示できる「リモコンウインドウ」が実現できます。

例として、次のリンクをクリックしてみて下さい。

リモコンウインドウを開く

クリックすると、サブウインドウが開きます。その中のリンクをクリックすると、サブウインドウ内ではなく、今このページが表示されているウインドウ内にリンク先が表示されます。(※)
※JavaScriptが無効なら、サブウインドウは開かずに、リンク先（リモコンウインドウ用のHTMLファイル）がこのウインドウ内に表示されます。

サンプルの（主な）ソース

このサンプル「リモコンウインドウ」の主な部分（リンクを実現している部分）のソースはこちらに用意しました。
※リモコンウインドウ内で右クリックして「ソースを表示」メニューなどでソースをご覧になっても同じことですが、ページを構成するその他の余計な部分もありますので、今回の話のメインの部分だけのソースをご覧になりたい場合にどうぞ。

return false の理由

サブウインドウを開く際も、メインウインドウへリンクを渡す際も、JavaScriptの終わりに「 return false; 」と記述しています。
これは、JavaScriptが無効になっているブラウザでもリンクを機能させるための対策として必要なものです。この意味について詳しくは、過去の記事「サブウインドウを開く弊害と対策」で説明していますので、ぜひご参照下さい。