はじめに
ここでは、新しいウィンドウを開くスクリプトをいくつか作成していこうと思います。 ただ開くだけでもなんですので、いくつかパターンを考えてみましょう。 とりあえず、別ウィンドウに通常と同様のウィンドウを開くパターンと、サブウィンドウ的にウィンドウを開くパターン、サブウィンドウ的にウィンドウを開くパターンの応用例の3つを考えていきます。
基本的な記述
まず、JavaScriptを使って新しいウィンドウを開く方法について、はじめに整理します。 実は、新しいウィンドウを開くだけであれば、HTMLのa要素だけでもできないことではありません。 以下のようにタグを記述すると、a要素でも新規ウィンドウを立ち上げて、そのウィンドウに指定のファイルを読み出します。
例： <a href="***.html" target="_blank">新規ウィンドウで開く</a>
a要素は、ページリンクのための要素で、href属性はリンク先のファイルのURLを指しています。 target属性がリンク先のファイルを表示させるウィンドウないしフレームを指定する属性で、"_blank"という特別なウィンドウ名(特定の名前を持たないウィンドウ)の指定によって、リンク先のファイルを常に新しいウィンドウに表示させるようにできます。 target属性は、通常はフレームを利用しているときに、表示先のフレームを特定するために利用することが多いです。 現在では、HTML-lint等にかけると減点対象になりますね(^_^;)。 なお、target属性に任意のウィンドウ名を記述した場合は、その名前のウィンドウがなければ新しくその名前をもつウィンドウを開いて、その名前のウィンドウが既に開かれていればそのウィンドウの中に、それぞれリンク先を表示する動作を行います。
少々寄り道が過ぎました。 本題のJavaScriptでの記述方法について触れていきましょう。 JavaScriptには、新しいウィンドウを開かせる機能として、「window.open()」メソッドが用意されています。 window.open()の記述方法について、まずまとめていきましょう。
例：
window.open(参照するファイルのURL, 展開先のウィンドウ名, 表示属性)
上記が、window.open()の記述方法です。 括弧内の第一引数で移動先のURLを指定し(a要素におけるhref属性)、次の第二引数が参照ファイルの表示先ウィンドウを指定します(a要素におけるtarget属性)。 JavaScriptのwindow.open()を利用した場合、上記のa要素で新規ウィンドウを開くケースとは違い、新しく開くウィンドウのカスタマイズをすることができます。 そのウィンドウの表示設定をするのが第三引数になります。 この第三引数で指定できる新規ウィンドウの表示方法を、以下にまとめておきます。
| 指定項目 | 備考 |
|---|---|
| toolbar | ツールバーの表示(yes/ 1)・非表示(no/ 0)を指定します。 |
| location | ロケーションバー(アドレス欄)の表示(yes/ 1)・非表示(no/ 0)を指定します。 |
| directories | ディレクトリーバーの表示(yes/ 1)・非表示(no/ 0)を指定します。 |
| status | ステータスバーの表示(yes/ 1)・非表示(no/ 0)を指定します。 |
| menubar | メニューバーの表示(yes/ 1)・非表示(no/ 0)を指定します。 |
| scrollbars | スクロールバーの表示(yes/ 1)・非表示(no/ 0)を指定します。 |
| resizable | ウィンドウサイズの変更の可(yes/ 1)・否(no/ 0)を指定します。 |
| width | ウィンドウの横幅を、pixel単位で指定します。 |
| height | ウィンドウの縦幅を、pixel単位で指定します。 |
| left | ウィンドウ左端の、ディスプレイ上の左端からの位置を、pixel単位で指定します。 |
| top | ウィンドウ上端の、ディスプレイ上の上端からの位置を、pixel単位で指定します。 |
| outerWidth | ウィンドウ外周の横幅をpixel単位で指定します。 IE非対応 |
| outerHeight | ウィンドウ外周の縦幅をpixel単位で指定します。 IE非対応 |
第三引数が指定されない場合、新規ウィンドウの表示の制御はブラウザに任されます。 私の手元の環境では、壇三引数を指定しなかった場合、上の表のtoolbarからresizableまでは指定されなければすべて非表示(=no/ 0)として返され、表示サイズについてはその時点でブラウザから「新規ウィンドウを開く」を選んだときのサイズに依存します。 それぞれの閲覧者ごとの表示環境に依存させる記述にしたくない場合は、ウィンドウサイズ以外は、すべての項目について漏れなく指定を入れておく方が無難でしょう。 状況によっては、スクロールバーが出なかったり、ウィンドウがリサイズできなかったりで、正常に内容を表示させられない可能性も考えられます。
window.open()メソッドは、<script>要素内に記述しても、関数(function)内で定義しても、イベントハンドラ内で定義しても、正常に動作します。