ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）
１２／１４日発行 ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.23★
| ウィンドウの操作Ⅰ |
今回はウィンドウの操作についてやってみよう。
今回のプログラムでやることは、新しいウィンドウを開くことなんだ。
そんなことは、ＨＴＭＬでもできるよって感じだけど、やっぱりJavaScriptにしかできないこともあるんだね。
それが、ウィンドウのスタイル指定なんだよ。
JavaScriptを使えば、新しく表示するウィンドウの大きさを指定したり、ツールバーやステータスバーの表示・非表示も指定できるんだ。
また、あるウィンドウから別の違うウィンドウの操作をすることもできるんだよ。
| ★ 簡単なウィンドウ操作 ★ |
まずはウィンドウを操作するに当たって、いちばん簡単な命令からやってみよう。
まず、新しいウィンドウを開かないといけないね。
新しいウィンドウを開く命令は次のようになるんだ。
新しいウィンドウを開く |
window.open('URL','ウィンドウ名','ステータス') |
これは、基本形。
ＵＲＬはそのウィンドウに表示するページのＵＲＬ。
つまり、ウィンドウを開いて、そこにページを表示するんだ。
ウィンドウ名とは新しく作ったウィンドウの名前(後で使うことになる)だよ。
ウィンドウ名は好きな名前を入れればいいんだけれど、必ず半角英数字で名前を入れてね。
（全角文字だと動かないことがある）
最後にステータスはそのウィンドウのオプション(形やバーの設定)を指定するんだ。
今は簡単なウィンドウ操作なので、
最低限知っておきたい下のウィンドウの開き方についてやってみよう。
新しいウィンドウを開く（簡単） |
window.open('URL','ウィンドウ名','') |
どこが違うのかというと、ステータスの欄は何も入っていないね。
このステータスについては後で説明するので、ただ単にウィンドウを新しく開けたい時は、上のように書こう。
さらに、現在のウィンドウを閉じたい時は、
現在のウィンドウを閉じる |
window.close() |
じゃあ、実際に新しいウィンドウを作ったり閉じたりする命令を見てみよう。
<HTML>
<HEAD>
<TITLE>新ウィンドウ表示</TITLE>
<SCRIPT language="JavaScript">
function OpenWin(){
window.open("http://village.infoweb.ne.jp/~fwig2642/yoshi/make_HP/gazou/title_main.gif"
,"win1","");
}
function CloseWin(){
window.close();
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" VALUE="新しいウィンドウを開くよ" onClick="OpenWin()">
<INPUT TYPE="BUTTON" VALUE="現在のウィンドウを閉じるよ" onClick="CloseWin()">
</BODY>≪結果≫
今作ったウィンドウ。
ただこれだけじゃ面白くないので、もっといろいろとウィンドウをいじってみよう。
ウィンドウのデザインはステータスの部分で指定するんだ。
だから、window.open('URL','ウィンドウ名','ステータス')のうちのステータスのところの指定方法を知らないといけないね。
じゃあ、いまからステータスの指定方法をやってみよう。
yes/noのところはそれぞれの機能のバーが、yesにした場合は付く。noにした場合は付かないんだ。
| toolbar = yes/no | :ツールバー（ブラウザのNEXTやBACKのあるバー） |
| location = yes/no | :ロケーションバー（アドレス,ＵＲＬを表示するところ） |
| status = yes/no | :ステータスバー（ブラウザの下の部分） |
| menubar = yes/no | :メニューバー（ファイル、編集、などのあるバー） |
| scrollbars = yes/no | :スクロールバー（画面の移動のためのバー） |
| width = 数字(ピクセル) | :ウィンドウの横の長さ |
| height = 数字(ピクセル) | :ウィンドウの縦の長さ |
ステータスはこれらの７つの指定ができるんだ。
yesかnoでどの機能を使うか指定しよう。
(デフォルト(何も指定しない場合は)yesになっている)
また、この７つの指定を複数個使いたい場合は、","で区切るんだよ。
じゃあ、実際に作ってみよう。
今回はメニューバーのみのブラウザを作ってみよう。
<HTML>
<HEAD>
<TITLE>新ウィンドウ表示</TITLE>
<SCRIPT language="JavaScript">
function OpenWin(){
window.open("http://village.infoweb.ne.jp/~fwig2642/yoshi/make_HP/gazou/title_main.gif"
,"win1","toolbar=no,location=no,status=no,menubar=yes,scrollbars=no,width=600,height=200");
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" VALUE="メニューバーのみのウィンドウ(600×200)" onClick="OpenWin()">
</BODY>≪結果≫
ステータスを指定しているところをよく見てごらん。
menubar(メニューバー)以外は全てnoにしているよね。
また、widthとheightで600×200の大きさに指定しているよ。
これで、メニューバー以外は表示しないウィンドウを作れるんだ。