元のウインドウ内にあるボタンをクリックしてサブウインドウを開いたり閉じたりします。
応用 :
<B>どうも(^^)/</B>を好きなHTMLに書き換えたりWinOpen(0,0,120,120)の数字を変えたりして使ってみてください。 ウインドウについて詳しくはwindow.openの参照をご覧ください。
参照 : function, 変数, window.open, document.write(), document.close(), ウインドウのクローズチェックif( !window.WinE02.closed ){命令}, window.close(), onClick,
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
var WinE02=""; //WinE02をグローバル変数として宣言
//サブウインドウオープン
function WinOpen(x,y,w,h){
// xは画面左端からの位置(ピクセル)
// yは画面上端からの位置(ピクセル)
// wはウインドウの内幅(ピクセル)
// hはウインドウの内高(ピクセル)
var para =""
+" left=" +x
+",screenX=" +x
+",top=" +y
+",screenY=" +y
+",toolbar=" +0 //1にするとtoolbar付き
+",location=" +0 //1にするとlocation付き
+",directories=" +0 //1にするとdirectories付き
+",status=" +0 //1にするとstatus付き
+",menubar=" +0 //1にするとmenubar付き
+",scrollbars=" +0 //1にするとscrollbars付き
+",resizable=" +1 //1にするとresizable可
+",innerWidth=" +w
+",innerHeight=" +h
+",width=" +w
+",height=" +h
WinE02=window.open('','WinNameE02',para);
WinE02.document.write('<b>どうも(^^)/</B>');
WinE02.document.close();
}
//サブウインドウクローズ
function WinClose(){
if( !window.WinE02.closed ){ WinE02.close() };
}
//-->
</script>
</head>
<body>
<form>
<input type="button" value=" Windowオープン "
onClick="WinOpen(0,0,120,120)"><br>
<input type="button" value=" Windowクローズ "
onClick="WinClose()"><br>
</form>
</body>
</html>
window.openに関する説明はwindow.openをご覧くださいonClick="命令文"でクリックしたら"命令文"を実行するという意味です
ここでは、たとえばonClick="WinOpen(x,y,w,h)"で関数WinOpen()のなかに書かれた命令を実行します
xは画面左端からの位置、yは画面上端からの位置、wはウインドウの内幅、hはウインドウの内高をそれぞれピクセルで指定できます。(xとyは100以上の数値にします)var WinE02と、functionの外で変数を宣言することでWinE02をWinOpen()の中でもWinClose()の中でも使えるようにします。このように複数のfunction内で使える変数をグローバル変数といいます。ひとつのfunction内だけのものはローカル変数といいfunction内で宣言します
WinE02.document.write()はサブウインドウWinE02に、ここではたとえば <B>どうも(^^)/</B> というHTMLを書き出すという意味になります
WinE02.document.close()はサブウインドウWinE02内の文字などの書き出しを終了するという意味です。これを忘れると文字が欠けることがあります
if( !window.WinE02.closed ){命令}はウインドウが閉じていなければ命令を実行します
WinE02.close()はサブウインドウWinE02を閉じるという意味です
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)