サブウィンドウを開く
JavaScriptを利用して新規ウィンドウを開く場合には、開かれるウィンドウに表示される各種バーやウィンドウのサイズなどの属性を制御することができます。 それを利用すれば、タイトルバー以外のバーを表示しないウィンドウやサイズを指定したウィンドウを開くなど、サブウィンドウ的なウィンドウを開かせるような動作も可能です。 今回は、そのサブウィンドウを開くスクリプトを考えていきます。
スクリプト部の書き方
サブウィンドウを開く場合でも、基本的なスクリプトの書き方は前回と同じです。 ただし、表示させたくないバーの設定や、リサイズの可否についての指定、ウィンドウのサイズ指定は、任意に設定します。
例：(表示上折り返していますが、実際には改行は入れないでください)
window.open("***.html","_blank",
"toolbar=no, location=no, directories=no, status=no,
menubar=no, scrollbars=no, resizable=yes, width=200, height=180");
上記のスクリプトでは、幅200ピクセル、高さ180ピクセルでリサイズが可能な、タイトルバー以外のバーが表示されない小窓を開き、そこに***.htmlを表示させます。 各種バーについての属性を「yes(または 1)」に変えれば、ウィンドウのカスタマイズも可能です。 各属性についての制御できる項目を、改めて挙げておきます。
| 指定項目 | 制御できる項目 |
|---|---|
| toolbar | ツールバー([戻る][中止][更新]等のボタンのあるバー)の表示を制御します。 |
| location | ロケーションバー(アドレス欄)の表示を制御します。 |
| directories | ディレクトリ・バー(IEの場合、ロケーションバー隣の[リンク]、Netscapeの場合、[メール][ホーム][検索][ブックマーク]ボタン等があるバー、Operaには該当バーなし)の表示を制御します。 |
| status | ステータスバー(「表示が完了しました」など、表示状態などの情報が表示されるバー)の表示を制御します。 |
| menubar | メニューバー([ファイル][表示][ツール]等のボタンのあるバー)の表示を制御します。 |
| scrollbars | スクロールバー(ウィンドウ内にページが収まりきらないときに右側や下側に表示されるバー)の表示を制御します。 |
| resizable | ウィンドウサイズの変更の可否を制御します。 |
| width | ウィンドウ内の表示領域の横幅を、pixel単位で指定します。 |
| height | ウィンドウ内の表示領域の縦幅を、pixel単位で指定します。 |
| left | ウィンドウ左端の、ディスプレイ上の左端からの位置を、pixel単位で指定します。 |
| top | ウィンドウ上端の、ディスプレイ上の上端からの位置を、pixel単位で指定します。 |
| outerWidth | ウィンドウ外周の横幅をpixel単位で指定します。 IE非対応 |
| outerHeight | ウィンドウ外周の縦幅をpixel単位で指定します。 IE非対応 |
バーの表示やリサイズについての指定がない場合、その項目についての設定はブラウザが勝手に解釈して表示します。 私の環境で確認した限りでは、IE、Netscape、Operaのいずれのブラウザも、指定がないときのデフォルト(初期値)は「no (0)」として扱われるので、すべての項目への指定がなかった場合はいずれのバーも表示されず、リサイズもできません。
なお、新規ウィンドウを開く場合、ウィンドウサイズを指定するケースでは特に、スクロールバーとリサイズについての設定は必ず指定しておいた方が無難です。 新規ウィンドウに読み出したページがウィンドウ内で表示しきれない場合、スクロールもウィンドウのサイズ変更もできない可能性があるので、最悪そのページのすべてを見ることができないこともあり得ます。 ローカル環境での表示が正常と確認できた場合でも、他の人の表示フォントを大きく設定したブラウザなどではウィンドウ外に内容がはみ出る可能性が残りますので、環境の差も考慮すると、スクロールバーとリサイズについての項目は少なくともいずれかをyes(1)に指定しておく方がいいでしょう。
ページへの導入
上記のスクリプトのページへの導入の仕方は、前ページの「新規ウィンドウでファイルを開く」と同じ動作をするスクリプトと同様ですので、わからない場合は前ページを参照してください。 特に付け加えて説明する部分はないと思いますので、ここでは割愛します。