ＪａｖａＳｃｒｉｐｔ講座(Vol.24)

ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）

１２／２１日発行　ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.24★

ウィンドウの操作Ⅱ

前回は新しいウィンドウを開く命令をやったね。
今回はその開いたウィンドウを他のウィンドウから操作する方法をやってみよう。
（※新しいウィンドウを子ウィンドウ、ウィンドウを出した元のウィンドウを親ウィンドウとする。）

★ 別のウィンドウを操作する ★

じゃあ、前回の方法で新しく出した別のウィンドウ(子ウィンドウ)を操作する方法についてやってみよう。
でも、もしたくさんのウィンドウが開いてあったら、コンピューターはどのウィンドウを操作したらいいのか分からないよね。
だからまず、それぞれのウィンドウに名前をつけてやろう。
前回の新しいウィンドウを開く命令を次のように書いて欲しい。

新しいウィンドウを名前(オブジェクト名)を付けて開く。

オブジェクト名 = window.open('URL','ウィンドウ名','ステータス');

特に変わったところはなく、始めに"オブジェクト名 = "というのを足しただけだよ。
これからウィンドウを操作するために名前が必要なんだ。
そして、その操作をする時に使う識別名がオブジェクト名なんだ。
(※オブジェクト名と覚えずにウィンドウの名前とおもっておけばよい。
オブジェクトとはＪＡＶＡ(JavaScriptとは別もの)などの言語で出てくる言葉。
説明すると長くなるので、今はウィンドウの名前と思っておく。
とにかく今回はオブジェクト名をウィンドウの名前と思って読んでいくこと。）
つまり、
オブジェクト名 = window.open('URL','ウィンドウ名','ステータス');
といのは前回やったwindow.open()の命令をオブジェクト名に代入しているんだね。
でも、window.open()の中にもウィンドウ名というのがあるよね。
これと、オブジェクト名の違いはなんだろう。
オブジェクト名というのは、さっきも言ったようにウィンドウを操作する時に使う名前なんだ。
あとでやっていくと思うけれど、このオブジェクト名を使ってウィンドウの操作をしていくよ。
じゃあ、window.open()の中のウィンドウ名とはなんだろう。
例えば全て同じウィンドウ名を使ってウィンドウをオープンすると、ウィンドウは１つしか開かれないんだ。
つまり、どういうことかというと、はじめwindow.open()で開かれたこのウィンドウの名前がwin1という名前だとするね。
このwin1というウィンドウが開いている時に、別のページをwin1というウィンドウ名で開いたとすると、すでにwin1というウィンドウが開いているので、そのウィンドウに上書きされるんだ（つまり、さっき開いたページに変わって新しいページが表示される）。
逆にいえば、全てのページを別のウィンドウ名で開くということは、常に新しいウィンドウが開いてページが表示されるということになるよ。

じゃあ、さっきのオブジェクト名というものを使って、今作ったウィンドウを閉じる命令をやってみよう。

オブジェクト名のウィンドウを閉じる

オブジェクト名.close();

（※オブジェクト名とは子ウィンドウの名前のことだったね。）
つまり、これも以前やったビルトインオブジェクトの考え方で、オブジェクト名を閉じる(close())という意味になるね。
（※ちなみに、別のウィンドウに文字を書く場合はオブジェクト名.document.write="";とかけばよい。）

もう１つ、今作ったウィンドウに表示するURLを操作する方法もやっておこうね。
これを使えば、URLごとにウィンドウを作らなくても親ページから、子ウィンドウに表示するページを自由に変えることができるから便利だよね。

オブジェクト名ウィンドウに表示するページをURLのページに移動させる。

オブジェクト名.location.href="URL";

≪補足≫

見てもらってわかるように、新しいウィンドウを操作する時は、今までやった普通の命令の前にオブジェクト名をつければいいんだ。
例えば、普通に今いるページをボタンで移動させたり、一定時間後に別のページに移動させたい時は、

表示するページをURLのページに変更（移動）させる。

location.href="URL"

これが普通現在のウィンドウで使う場合のURL変更法なんだ。
けれど、以前にもやったようにこれを正式に書くと、
今回オブジェクト名をつけるようにwindowというのを前につけて、
window.location.href="URL"
となるんだ。
つまり、今いるウィンドウのオブジェクト名をwindowとしているんだね。
（現在操作しているページはwindowという名前になっている）
けれど、今までやってきたようにほとんどが自分のウィンドウを操作する方法なので、
毎回わざわざwindowを書くのは面倒臭いよね。
だから、windowというのは書かずに省略してもいいことになっているんだ。
この命令を使ったプログラムを１つあげておくね。

--一定時間後にページを移動する--

<HTML>
<HEAD>
<TITLE>一定時間後にページを移動する</TITLE>
<SCRIPT language="JavaScript">
    function ChangePage(){
        location.href="http://village.infoweb.ne.jp/~fwig2642/yoshi/make_HP/main.htm";
    }
</SCRIPT>
</HEAD>
<BODY onLoad="setTimeout('ChangePage()',1000*5)">
５秒後に別のページに移動します。
</BODY>

--解説--

簡単に説明すると、
ページの呼び出しと共にsetTimeout()を呼び出しているね。
ここでは、1000*5となっているので５秒後にChangePage()を実行することになる。
（１秒は1000なので、ｎ秒は1000*nになる。）
そのChangePage()でlocation.hrefを使って他のページに移動させているね。

じゃあ、実際に親ウィンドウから子ウィンドウの操作をやってみよう。

--新しいウィンドウを操作する--

<HTML>
<HEAD>
<TITLE>新ウィンドウ操作</TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" VALUE="新しいウィンドウを開く" onClick="OpenWin()">
<INPUT TYPE="BUTTON" VALUE="ウィンドウを閉じる" onClick="CloseWin()">
<INPUT TYPE="BUTTON" VALUE="子ウィンドウのページ変更" onClick="ChangePage()">
</BODY>
</HTML>

≪結果≫

↑ウィンドウ操作

--解説--

<HTML>
<HEAD>
<TITLE>新ウィンドウ操作</TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" VALUE="新しいウィンドウを開く" onClick="OpenWin()">
<INPUT TYPE="BUTTON" VALUE="ウィンドウを閉じる" onClick="CloseWin()">
<INPUT TYPE="BUTTON" VALUE="子ウィンドウのページ変更" onClick="ChangePage()">
</BODY>
</HTML>

①まず、前回のようにして新しいウィンドウを作るんだけれど、
あとで操作できるように今から作るウィンドウにmyWinという名前をつけておこう。
②作ったウィンドウを操作するので、ウィンドウの名前を使って、
    myWin.close();
という命令で、作った"myWin"というウィンドウを閉じよう。
③同じように、ページを移動させる命令を使って、
    myWin.location.href="URL"
としてやろう。