サブウィンドウを開く・応用
前ページでは、サブウィンドウを開く方法を解説しました。 ここでは、サブウィンドウを開く動作と、開いたサブウィンドウに表示する内容を、そのウィンドウを開いたページ側から指定する方法について考えていきます。
前ページまでのスクリプトは、新しいウィンドウを開き、そのウィンドウにあらかじめサーバー上(あるいはローカルディスク上)に用意されているHTMLファイルなどを読み出すスクリプトになっていました。 この場合、新しいウィンドウに表示させるページを、あらかじめ別に用意しておく必要があります。 今回は、新しいウィンドウに用意されたHTMLファイルなどを読み込ませるのではなく、ページを開いた側のスクリプトで新しいウィンドウ内に表示内容を書き出していく方法を考えていきます。
ちなみに、この方法はサブウィンドウ内に表示させる内容が少ない場合に有効な方法です。 ウィンドウ内に書き出す内容を既にロードしたスクリプト内で指定するので、新規ウィンドウに呼び出すファイルを用意する手間も、それを読み出しにいく分の回線負荷も低減することができます。 一言メッセージや、画像ファイルをサムネイルで用意し、画像クリックでフルサイズを表示させるケースなどには特に有効でしょう。
ここでは特に、多くの写真・画像を展示するサイトにおいて、サムネイルを羅列しておき、フルサイズの画像をサムネイルをクリックしたときに表示させるようなページを想定したスクリプトを作ります。 画像ファイルに直接リンクを貼るよりは少し見栄えのするページになると思います。
設計・企画
先に挙げたようなページを実現するようなスクリプトを設計します。 改めてまとめると、リンクをクリックされたとき、新しいウィンドウを開き、その内容をJavaScriptで書き出して画像を表示させるように設定します。 また、これだけでは画像ファイルに直接リンクを貼るのと大差ありませんので、これに加えてウィンドウサイズを画像ファイルに合わせて自動調整することを一緒に盛り込みましょう。
作成準備
ここで作るスクリプトには、いくつかこの項目ではまだ説明していない記述方法をいくつか利用します。 まず、それについて簡単に整理しましょう。
document.write()メソッド
このメソッドは、ウィンドウ内に括弧内の内容を書き出すメソッドです。 正確には「window.document.write()」ですが、はじめのwindowプロパティの表記(「window.」)は、そのスクリプトがおかれているページが表示されるwindow内をJavaScriptで操作する場合には、省略が可能です。 なお、括弧内には変数も使用でき、その場合、変数部分は変数内に格納された内容が置き換わって表示されます。 また、括弧内の文字列にタグやメタ文字、文字参照などはブラウザに解釈された上で表示されます。 つまり、HTMLタグを記述すればそれはHTML要素として解釈されますし、メタ文字や文字参照も解釈された上で表示されます。 下に実例として、document.write()でいくつか文字を書き出してみますので、下記ソースをそのままコピー&ペーストするか、その下の表示例とソースを見比べて、ブラウザ上での表示を確認してみてください。
ソース：
<script type="text/javascript">
<!--
document.write("<hr>");
document.write("\'<br>");
document.write("&\;");
// -->
</script>
表示例：
document.open()メソッド
ドキュメントストリームを開くメソッドです。 簡単に言ってしまえば、document.write()メソッドで新しくページ内容を書き出すときに、その下準備をするものです。 もしそこにこのメソッドが実行される前にウィンドウ内に表示されているものがあった場合、それらはすべて消されてウィンドウ内は白紙になります。 特にウィンドウ内の表示を掃除する必要がない場合などでは、省略も可能です。
document.close()メソッド
ドキュメントストリームを閉じるメソッドです。 そこでdocument.write()で内容を書き出すのを終わります、ということを明示するものです。 こちらは、省略してしまうとブラウザが待機状態のままになったりすることもあるので、予期しない動作を防止する意味では、記述しておく必要があります(私は結構書かないこともありますが)。
window.focus()メソッド
おまけ的ですが、対象のウィンドウにフォーカスを合わせ、アクティブウィンドウにします。 フォーカスを合わせたウィンドウは、前面に出てくるはずです。