サブウインドウからメインウインドウを制御
スクリプトを活用すると、右図のように、「サブウインドウ」(小窓)から、「メインウインドウ」(親窓)の表示ページを切り替えることができます。
これを活用して、ナビゲーション用(メニュー用)のサブウインドウ(小窓)を開いて、そこからのリンクで、メインウインドウ(親窓)の表示ページを切り替える仕組み「リモコンウインドウ」を作ってみましょう。
今回は、この「リモコンウインドウ」を実現する方法をご紹介致します。
実現にはJavaScriptを使うのですが、とても簡単にできます。
サブウインドウを開くには?
まずは、サブウインドウを開かなくてはいけませんね。
サブウインドウの作り方は、(JavaScriptガイドサイトの記事)「サブウインドウの位置等を指定」に詳しく書かれていますのでそちらをご参照頂きたいのですが、簡単に例を紹介すると、次のようなソースになります。
<a href="subwindow.htm" onClick="window.open('subwindow.htm', 'sample', 'width=300,height=150,scrollbars=1,resizable=1'); return false;">小窓を開く</a>
※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>
※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が無効になっているブラウザでもリンクを機能させるための対策として必要なものです。 この意味について詳しくは、過去の記事「サブウインドウを開く弊害と対策」で説明していますので、ぜひご参照下さい。
終わりに
今回は、サブウインドウからメインウインドウにリンクを渡す方法をご紹介致しました。ナビゲーション用のリモコンウインドウ以外にも、様々な活用場面があると思います。 ぜひ、活用してみて下さい。
【関連記事】
- リンク移動前に確認させる方法
- 極短JavaScriptでプルダウンメニューを作る
- JavaScriptで自動的に替わるスライドショーを作る
- ヘルプウインドウを作る(JavaScriptガイドサイト)
- 親子ウインドウの有無確認(JavaScriptガイドサイト)