JavaScriptの「document.write」の正体＆「alert」などダイアログやブラウザー操作の基本：JavaScript標準ライブラリの使い方超入門（7）（3/5 ページ）

ブラウザーオブジェクトのクローンですよね（サブウィンドウを開く）

　ダイアログは、何らかの確認や文字列の入力といった簡易な操作を行うのにとても便利ですが、画像やフォームなどのコンテンツを含んだ複雑な画面を作ることはできません。

　このような場合は、専用のWebページを作成しておき、open（）メソッドで別画面として開くことで対応します。

サブウィンドウの操作

　Windowオブジェクトのopen（）メソッドは、新規のブラウザーウィンドウを開きます。ページ上に配置したボタンに連動させて、ボタンをクリックすると新規のウィンドウを開く、といった使い方ができます。なお、ウィンドウに表示するページはURLで指定しますが、相対パス（表示中のページを基点にしたパス）を指定して、サイト内のページを開くことができます。

　新規にウィンドウを開く場合は、ページを見ている人に不安感を与えないように配慮することが必要です。ウィンドウを開くためのボタンを配置したら、ウィンドウを閉じるボタンも配置しておいた方がよいでしょう。

　window.open（）メソッドで開いたウィンドウは、window.close（）メソッドで閉じることができます。

Hint　イベントリスナーにプロパティとしてハンドラーを登録

　本編では、イベントリスナーに直接、イベントハンドラー（実際の処理を行う部分）を匿名関数として登録していましたが、イベントハンドラーをプロパティとして登録することもできます。使用頻度は多くないかもしれませんが、イベントの対象が複数の要素にまたがるといった場合に、イベントハンドラーを使い回すことができます。

　この場合、イベントハンドラーに名前を付けて、別途で定義しておきます。

サイト内のページをサブウィンドウに表示する

ページ上にボタンを配置し、ボタンクリックでサブウィンドウを表示し、あらかじめ用意しておいたページを表示する。

※プログラムを格納したHTMLドキュメントと同じ場所に保存

　では、サイト内の同じフォルダーに保存されているページを新規のウィンドウを開いて表示するようにしてみましょう。

　今回は、ボタンを2個配置し、id属性にそれぞれbtn1、btn2と設定しています。

　（1）は、id属性が「btn1」のボタン（[ウィンドウを開く]ボタン）がクリックされたときの処理です。window.open（）メソッドは、開いたウィンドウの参照を戻り値として返すので、これを変数subwinに代入しています。「window.open（ ... ）;」とだけ記述してもウィンドウを開くことができますが、あとでウィンドウを閉じる処理を行うので、ウィンドウの参照を変数subwinに代入しておいたのですね。なお、変数subwinは、ページ読み込みのイベントリスナーの直下で宣言することで、各ボタンのイベントリスナーから参照できるようにしています。

　[ウィンドウを閉じる]ボタン（btn2）のイベントリスナーでは、ボタンがクリックされると（2）によってウィンドウを閉じるようにしています。「subwin.close（）;」のように、windowオブジェクトとして、開いたウィンドウの参照を格納している変数subwinを指定しています。このように、ウィンドウを閉じる場合は、どのブラウザーオブジェクト（Windowオブジェクト）を対象にするのかを指定する必要があります。「window.close（）;」と書くと、ボタンを配置してあるウィンドウ自体が閉じてしまうので注意してください。