梅ちゃん堂 > JavaScript 入門 > JavaScript 実用編 >
- ウィンドウの制御 -

JavaScript には window と呼ばれるオブジェクトがあります。 window オブジェクトは WWW ブラウザのウィンドウそのものの情報を格納しており、 その中にはウィンドウのサイズや位置、メニューバー、ロケーションバー、ステータスバー、スクロールバーといった、 ウィンドウを構成する各種部品についての情報、ウィンドウを制御するための各種メソッドが含まれています。

また WWW ブラウザはウィンドウを基本として、その中に HTML 文書が展開するわけですから、 document オブジェクトよりも上位に位置しています。 例えば document.links[0] は正確には window.document.links[0] と表すべきですが、 慣例上、window. は省略して良いことになっています。

この章ではウィンドウの持つプロパティやメソッドを一瞥してから、 子ウィンドウの操作に入ることにします。

ウィンドウオブジェクト

ウィンドウオブジェクトに属するプロパティやメソッドは数が多いのですが、 ここではたいていのブラウザに共通して使える主なものを見てみます。

プロパティ
closed ウィンドウが閉じられていれば真を返す
defaultStatus ステータスバーのデフォルトの文字を返す(設定も可能)
name target 属性などで設定されたウィンドウ名を返す(設定も可能)
opener 親ウィンドウを返す
status ステータスバーの文字を返す(設定も可能)
メソッド
blur( ) ウィンドウを背後に移動
close( ) ウィンドウを閉じる
focus( ) ウィンドウを前面に移動
moveBy(x, y) ウィンドウの位置を x, y で指定した相対量移動
moveTo(x, y) ウィンドウの位置を x, y で指定した絶対位置に移動
open(URL, window_name, option, history) ウィンドウを開く
print( ) ウィンドウ内容を印刷する
resizeBy(width, height) ウィンドウサイズを width, height で指定した相対量変える
resizeTo(width, height) ウィンドウを width, height で指定したサイズに変える
scroll(x, y) ウィンドウ内容を x, y で指定した位置に移動する
scrollBy(x, y) ウィンドウ内容を x, y で指定した相対量移動する
scrollTo(x, y) ウィンドウ内容を x, y で指定した位置に移動する
イベント
onblur ウィンドウが背後に移動したとき
onerror エラーが発生したとき
onfocus ウィンドウが前面に移動したとき
onload ページの読み込みが完了したとき
onmove ウィンドウが移動したとき
onresize ウィンドウサイズが変更されたとき
onunload ページが切り替えられるとき

ウィンドウオブジェクトには alert( )、confirm( )、prompt( )、clearInterval( )、 setInterval()、clearTimeout()、setTimeout( ) などダイアログやタイマーに関連するメソッドもありますが、 ここでは省略します。

子ウィンドウの作成と制御

ウィンドウオブジェクトの持つプロパティやメソッドは、 もちろんデフォルトウィンドウにも関係していますが、どちらかと言えば子ウィンドウの作成に使用されることが多いと思います。 以下ではその方法について見てみます。

JavaScript で新しいウィンドウを作成するとき、次のような定型構文に出会うと思います。

childWin = window.open("child.htm", "child", "width=200,height=400");

これは open( ) メソッドが、作成されたウィンドウオブジェクトを戻り値として返すこと、 パラメータを3つ必要とすることを表しています。

単に新しいウィンドウを作成するだけなら、戻り値は省略してもいいのですが、 ウィンドウを制御するには戻り値を変数に代入して置いた方が便利です。

第1パラメータにはウィンドウに表示するファイルの URL を指定します。 省略した場合、ブランクページが表示されます。 ウィンドウにあとから書き込む場合は、これでもいいわけです。 省略する場合は、"" のように空のデータを引用符で囲んで下さい。

第2パラメータにはウィンドウ名を指定します。 ウィンドウ名とは、WWW ブラウザのウィンドウが複数表示されているとき、子ウィンドウを識別するための名前であって、 ウィンドウタイトルではありません。

<A href="***.htm" target="sample">

のように、target 属性で指定されるウィンドウ名と同じものです。 実際、open() メソッドの第2パラメータで目標ウィンドウ名(例えば "new")を設定しておき、あとで

<A href="AAA.htm" target="new">

のようにリンク先のターゲットを指定してやると、"new" の名前で作成されたウィンドウの中に AAA.htm を読み出すことが出来ます。

特に必要なければ、第2パラメータを省略してもかまいません。 その場合も "" のように空のデータを引用符で囲みます。

open ( ) メソッドは、第2パラメータで指定したウィンドウが既にあれば、そこにファイルをロードし、 指定したウィンドウが存在しない場合や無指定の場合には新しいウィンドウを作成します。

第3パラメータにはウィンドウの表示方法を設定します。 設定項目は " "(または ' ')で囲み、設定項目が複数あるときはコンマ(,)で区切り、スペースを空けずに併記します。 特に設定せず、デフォルト設定のウィンドウを開きたい場合は "" のように空のデータを引用符で囲んで下さい。

Internet Explorer 3.x 以上、Netscape 2.x 以上など
directories = 1/0 (yes/no) ディレクトリバー表示・非表示
location = 1/0 (yes/no) ロケーションバー表示・非表示
menubar = 1/0 (yes/no) メニューリバー表示・非表示
resizable = 1/0 (yes/no) ウィンドウサイズ変更の可・不可
scrollbars = 1/0 (yes/no) スクロールバー表示・非表示
status = 1/0 (yes/no) ステータスバー表示・非表示
height = (ピクセル数) ウィンドウの高さ
width = (ピクセル数) ウィンドウの幅
Internet Explorer 4.x 以上、Netscape 4.x 以上など
channelmode = 1/0 (yes/no) チャンネルモードの設定
fullscreen = 1/0 (yes/no) フルスクリーンモードの設定
titlebar = 1/0 (yes/no) タイトルバー表示・非表示
left = (ピクセル数) ウィンドウ左端の画面上の位置
top = (ピクセル数) ウィンドウ上端の画面上の位置
Netscape 4.x 以上
alwaysLowered = 1/0 (yes/no) 常にウィンドウを背後に表示
alwaysRaised = 1/0 (yes/no) 常にウィンドウを前面に表示
dependent = 1/0 (yes/no) 親ウィンドウが閉じられると閉じる
hotkeys = 1/0 (yes/no) セキュリティキー以外のキーを無効または有効にする(機種に依存)
innerHeight = (ピクセル数) ウィンドウ内側の高さ
innerWidth = (ピクセル数) ウィンドウ内側の幅
outerHeight = (ピクセル数) ウィンドウ外側の高さ
outerWidth = (ピクセル数) ウィンドウ外側の幅
screenX = (ピクセル数) ウィンドウ左端の画面上の位置
screenY = (ピクセル数) チャンネルモードの設定
z-lock = 1/0 (yes/no) 常にウィンドウを背後に表示

第3パラメータは、何か1つ指定した場合は他の設定はすべて false となります。 新しいウィンドウが開いたが、スクロールバーも表示されずサイズ変更もできないため、 文書が一部見えなくなっている例をときどき見かけるので注意が必要です。

例1:
childWin = window.open("child.htm", "child", "width=200,height=400");
高さ 200 ピクセル、幅 400 ピクセルのウィンドウを開く(各種バーは非表示、リサイズ不可)

例2:
sampleWin = window.open("", "sample", "scrollbars=yes,resizable=yes");
スクロールバーつきでサイズ変更可能な空のウィンドウを開く(サイズは指定せず)

例3:
testWin = window.open("", "test", "");
空のウィンドウを開く(各種バー表示の表示やサイズはユーザー設定のまま)

第4パラメータには、子ウィンドウが親ウィンドウの履歴を受け継ぐ場合は true、受け継がない場合は false を指定します。 特に必要なければ省略してかまいません。

子ウィンドウを作成する場合、あらかじめ作成しておいた HTML ファイルなどを第1パラメータで URL 指定して読み込む場合と、 ウィンドウを開いた後に書き込む場合の2通りがあります。

後者は document.write( ) メソッドを使いますが、その前に document.open( ) で文書を開き、 書き込み後に document.close( ) するのが正しい方法です。(document.close( ) は文書を開き終わった後に出力を終了するための手続きで、 ウィンドウや文書が閉じてしまうことはありません。)

testWin = window.open("", "test", "width=400,height=400");
testWin.document.open("text/html");
testWin.document.write("<CENTER>ウィンドウ表示テスト</CENTER>");
testWin.document.close( );

URL 指定済みの文書を開いた後で document.write( ) すると、元の文書はクリアされてしまうので注意して下さい。

作成された子ウィンドウは上記のウィンドウメソッドやプロパティを使って制御することが出来ます。 子ウィンドウに対して作成元のデフォルトウィンドウは opener となります。従って

testWin.opener.location.href = "***.htm";

のように子ウィンドウの側から親ウィンドウを制御することも可能です。

ウィンドウを制御する場合、指定ウィンドウが存在しなければエラーとなります。 1度ページ上で作成された子ウィンドウなら、 ユーザーがそのウィンドウを閉じた後でも closed プロパティでそのウィンドウが存在するかどうかを確かめることが出来ます。

if (testWin.closed) alert("ウィンドウがありません!");

ところが1度も作成されていないウィンドウの場合、この方法でもエラーになってしまいます(ウィンドウを作成する前など)。 その場合には次の方法で対処することが出来ます。

if (typeof (new_window) == "undefined" || testWin.closed)
alert("ウィンドウがありません!");

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved