JavaScript プログラミング
前へ 目次へ 次へ 

　９．サブウィンドウ

　ウィンドウ（ブラウザ）から別のウィンドウ（ブラウザ）を開く。

(1) メッセージ表示ウィンドウ
　警告や確認などのメッセージを表示する簡易なウィンドウを開く。alertとconfirmがある。まずは、すでに何度も使っているがalertからサンプルで見てみる。

alert("メッセージ文字列");

HTMLリスト　[[jsrei12.html]]

<HTML>
<HEAD>
<TITLE>ウィンドウ</TITLE>
</HEAD>
<BODY><SCRIPT language="JavaScript">
<!--
function subwin(){
    alert("警告用ですが、文字なら何でもOKです。");
}
//-->
</SCRIPT>
<P>ウィンドウ</P>
<FORM><INPUT type="button" onclick="subwin();" value="別ウィンドウを開く"></FORM>
</BODY>
</HTML>

　ブラウザで表示し、「別ウィンドウを開く」ボタンをクリックすると左図ようなウィンドウが開く。

　ウィンドウの大きさはメッセージの長さによって調整される。メッセージの途中で改行したいときは、 \n を使う。C言語の改行文字と同じである。

　もう一つの confirm の書式は次のとおりである。

変数 = confirm("メッセージ文字列");

　"変数="という書き方からわかるように何かの値が返却値として得られる。試しに、上(alert)のリストのalertをcomfirmに変更してみなさい。

　ブラウザで表示し、「別ウィンドウを開く」ボタンをクリックすると左図ようなウィンドウが開く。alertと違って、メッセージの下に「OK」と「キャンセル」2つのボタンが用意されている。
　「OK」ボタンをクリックすると true、「キャンセル」ボタンをクリックすると false が返却される。

問題　「OK」と「キャンセル」のどちらがクリックされたかをalertで表示するプログラムを作成しなさい。


　if(hensu == true) の部分は == true を省略して if(hensuu) でよい。


(2) サブウィンドウ
　メッセージだけでなく、ホームページを表示するウィンドウを開く。サブウィンドウに表示するページは別のファイルとして用意しておく必要がある。次にサンプルを示す。ファイル名はsubwin.htmlとする。

サブウィンドウ用のサンプル HTMLリスト　[[subwin.html]]
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY bgcolor="#00ffff">
<P>サンプルのサブウィンドウ<BR>
</P>
<FORM>
<INPUT type="button" onclick="window.close();" value="サブウィンドウを閉じる">
</FORM>
</BODY>
</HTML>
　closeがウィンドウを閉じるメソッドである。

　ウィンドウを開くリストを次に示す。openがウィンドウを開くメソッドである。

window.open("URL", "ウィンドウ名");
　・URL はサブウィンドウで表示するページのアドレス(ファイル名)である。
　・ウィンドウ名 はウィンドウを識別するための名前である。任意の文字列でよい。

HTMLリスト　[[jsrei13.html]]

<HTML>
<HEAD>
<TITLE>サブウィンドウを開く</TITLE>
</HEAD>
<BODY>
<P>サンプルのウィンドウ<BR>
</P>
<FORM>
<INPUT type="button" value="サブウィンドウを開く"
 onclick='window.open("subwin.html", "sub");'>
</FORM>
</BODY>
</HTML>

　ブラウザで表示して、「サブウィンドウを開く」ボタンをクリックすると水色のサブウィンドウが開く。


(3) 形状の指定
　openメソッドで開いたウィンドウの見た目（形状）をいろいろと指定することができる。openメソッドのURL、ウィンドウ名に続けて3つ目の引数として指定する。

window.open("URL", "ウィンドウ名", "オプション");
　・形状を指定するオプションが複数の場合はカンマで区切って指定する。

主なオプション
toolbar ツールバーの表示(yes)／非表示(no)
location ロケーションの表示(yes)／非表示(no)
directories ディレクトリの表示(yes)／非表示(no)
status ステイタスの表示(yes)／非表示(no)
menubar メニューバーの表示(yes)／非表示(no)
scrollbars スクロールバーの表示(yes)／非表示(no)

　メニューバーとステイタスだけを表示するように指定してサブウィンドウを開くリストを次に示す。

HTMLリスト　[[jsrei13b.html]]

<HTML>
<HEAD>
<TITLE>形状の指定</TITLE>
</HEAD>
<BODY>
<P>サンプルのウィンドウ2<BR>
</P>
<FORM>
<INPUT type="button" value="サブウィンドウを開く"
 onclick='window.open("subwin.html", "sub", "menubar=yes, status=yes");'>
</FORM>
</HTML>

　オプションには表示したいオプションだけを指定している。次のように主なオプションをすべてを書いても同じである。

toolbar=no, location=no, directories=no, status=yes, menubar=yes, scrollbars=no

　すなわち、省略したオプションについては非表示(no)の指定になる。オプションを何も指定しなければすべてのオプションが表示(yes)の指定になる。

ウィンドウサイズの指定
　ウィンドウの大きさを指定するオプションである。数値で大きさを指定する。単位はピクセル（ドット）である。

height ウィンドウ内側（表示領域）の高さを指定する。
width ウィンドウ内側（表示領域）の横幅を指定する。

　高さ100、横幅200の大きさでサブウィンドウを開くリストを次に示す。

HTMLリスト　[[jsrei13c.html]]

<HTML>
<HEAD>
<TITLE>ウィンドウサイズ</TITLE>
</HEAD>
<BODY>
<P>サンプルのウィンドウ3<BR>
</P>
<FORM>
<INPUT type="button" value="サブウィンドウを開く"
 onclick='window.open("subwin.html", "sub", "height=100, width=200");'>
</FORM>
</HTML>

　ウィンドウの内側のサイズが指定した大きさのサブウィンドウが開く。
　高さと横幅のオプションを指定したので、メニューバー(menubar)などほかのオプションについては、非表示のなっている。


前へ 目次へ 次へ 
 JavaScript プログラミング Copyright © 2003 Hiroshi Masuda 

 

 

inserted by FC2 system