小窓から親窓へリンクを渡す方法は、様々な場面で活用できます。文宏ホームページ作成ガイドサブウインドウからメインウインドウを制御スクリプトを活用すると、右図のように、「サブウインドウ」(小窓)から、「メインウインドウ」(親窓)の表示ページを切り替えることができます。これを活用して、ナビゲーション用(メニュー用)のサブウインドウ(小窓)を開いて、そこからのリンクで、メインウインドウ(親窓)の表示ページを切り替える仕組み「リモコンウインドウ」を作ってみましょう。今回は、この「リモコンウインドウ」を実現する方法をご紹介致します。実現にはJavaScriptを使うのですが、とても簡単にできます。サブウインドウを開くには?まずは、サブウインドウを開かなくてはいけませんね。サブウインドウの作り方は、(JavaScriptガイドサイトの記事)「サブウインドウの位置等を指定」に詳しく書かれていますのでそちらをご参照頂きたいのですが、簡単に例を紹介すると、次のようなソースになります。false;">小窓を開く</a>※a要素のonClickイベントにサブウインドウを開く指示を記述しています。sample、横幅は300ピクセルで高さは150ピクセルです。その他オプションの指定がありますが、詳しくは記事「サブウインドウの位置等を指定」をご参照下さい。falseが必要な理由は後述。上記のソースを表示させると、次のようになります。小窓を開くこのリンクをクリックすると、サブウインドウが開きます。(※)※JavaScriptが無効なら、サブウインドウは開かず、このウインドウ内に表示されます。リンク先の表示をメインウインドウにするには?さて、サブウインドウ内で表示しているページに、普通にリンクを記述していれば、そのリンク先はそのサブウインドウ内で表示されます。(サブウインドウを開いた呼び出し元の)メインウインドウには表示されません。」と記述すれば(※)、新しい別のウインドウにリンク先を表示することはできます。メインウインドウ側にリンク先を表示することはできません。target="_blank">リンク</a>」など。すれば、サブウインドウからメインウインドウの表示ページを切り替えられるでしょうか?opener.location.href実はとっても簡単で、JavaScriptを使って、次のような1行を記述するだけです。これを、HTML中に記述する際には、次のようにします。ウインドウ</a>※a要素のonClickイベントに、メインウインドウ(親窓)でリンクを開く指示を記述しています。JavaScriptが無効だと、現在のウインドウ(子窓)で開きます。(JavaScript部分ではなく、href属性で指定した部分が機能します。)※abc.htm:リンク先のHTMLファイルです。false:この記述が必要な理由は後述。」について、簡単に説明しておきます。JavaScriptを使ってリンクを実現する場合、次のようなコードを記述します。」にリンク先のURLを代入すれば、現在のウインドウで表示しているページを変化させられます。」を加えると、メインウインドウで表示しているページを変化させられるようになります。サンプル上記のソースを、サブウインドウで表示させるページ内に記述することで、リンク先をメインウインドウに表示できる「リモコンウインドウ」が実現できます。例として、次のリンクをクリックしてみて下さい。リモコンウインドウを開くクリックすると、サブウインドウが開きます。その中のリンクをクリックすると、サブウインドウ内ではなく、今このページが表示されているウインドウ内にリンク先が表示されます。(※)※JavaScriptが無効なら、サブウインドウは開かずに、リンク先(リモコンウインドウ用のHTMLファイル)がこのウインドウ内に表示されます。サンプルの(主な)ソースこのサンプル「リモコンウインドウ」の主な部分(リンクを実現している部分)のソースはこちらに用意しました。※リモコンウインドウ内で右クリックして「ソースを表示」メニューなどでソースをご覧になっても同じことですが、ページを構成するその他の余計な部分もありますので、今回の話のメインの部分だけのソースをご覧になりたい場合にどうぞ。これは、JavaScriptが無効になっているブラウザでもリンクを機能させるための対策として必要なものです。この意味について詳しくは、過去の記事「サブウインドウを開く弊害と対策」で説明していますので、ぜひご参照下さい。終わりに今回は、サブウインドウからメインウインドウにリンクを渡す方法をご紹介致しました。ナビゲーション用のリモコンウインドウ以外にも、様々な活用場面があると思います。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。