これまでずっと、ひとつのウインドウだけを使ってきましたが、新しいウインドウを開きたいときもあります。
window.open(URL, 名前, オプション)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function dispw()
{
var win01;
win01=window.open("","","width=300,height=100");
win01.document.write("これは新しいウインドウです。<p>");
win01.document.write(
'<p><form><input type="button" value="閉じる" onclick="window.close()"></form>');
win01.document.close();
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onclick="dispw()">
</form>
</body>
</html>
ここをクリックしてください。この例では、URLと名前は省略しています。win01 という新しいウインドウを開いて、ここにメッセージと閉じるボタンを書き出しています。width=300,height=100は、ウィンドウの幅と高さをピクセル単位で指定しているオプションです。
他に、次のオプションがあります。これらは、directories = yes/no または directories = 1/0 というように指定します。
| directories |
ディレクトリーバーの有無 |
| location |
ロケーションバーの有無 |
| menubar |
メニューバーの有無 |
| scrollbars |
スクロールバーの有無 |
| status |
ステータスバーの有無 |
| toolbar |
ツールバーの有無 |
| resizable |
ウインドウサイズ変更の可／不可 |
なお、オプションを何も指定しないと、通常の状態のウインドウが開きますが、ひとつでも指定すると、他のオプション項目は、全て no になります。
次の例では、新しいウインドウを開いて、そのウインドウから親ウインドウを操作しています。ここをクリックしてください。なお、親ウインドウの操作の内、location を指定する以外の操作は、古いフラウザ（IE3, NN3など）では動作しません。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function dispw()
{
win01=window.open("document029.htm","","width=300,height=100");
}
</script>
</head>
<body>
<form>
<input type="button" value="子ウインドウを開く" onclick="dispw()">
</form>
</body>
</html>
"document029.htm" は次の内容
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function opn()
{
opener.window.location="https://www.hakko.co.jp";
opener.window.resizeTo(640,300);
opener.window.focus();
}
</script>
</head>
<body>
<form>
<input type="button" value="親ウインドウを操作" onclick="opn()">
</form>
</body>
</html>
opener は、自分を開いた親を参照しています。location で、八光電機のホームページ（https://www.hakko.co.jp）に場所を移動します。resizeTo で、ウインドウサイズをピクセル単位で（640, 300）にします。最後に、focus でフォーカスを当てて（ウインドウを手前にする）います。
この他にも、ウインドウを操作する命令が色々とありますが、これらのほとんどは、古いフラウザ（IE3, NN3など）では動作しません。
| moveTo(x, y) |
ウインドウを(x, y)に移動する（ピクセル単位） |
| moveBy(x. y) |
ウインドウを(x, y)に相対的に移動する（ピクセル単位） |
| resizeBy(x, y) |
ウインドウサイズを相対的に(x, y)変更する（ピクセル単位） |
| onresize = 命令 |
ウインドウサイズ変更時のイベント |
| onload = 命令 |
ウインドウ読み込み完了時のイベント |
| onunload = 命令 |
ウインドウ切り替え時のイベント |
| blur() |
ウインドウのフォーカスを外す |
| onfocus = 命令 |
ファーカスが当たったときのイベント |
| onblur = 命令 |
フォーカスが外れたときのイベント |
これらを使った例です。ここをクリックしてください。ページを開いたときは onload イベントで、ウインドウのサイズと位置を変更しています。
各ボタンをクリックすると、resizeBy でウインドウのサイズ、moveBy でウインドウの位置を変更します。なお、switch は、古いフラウザでは動作しないので、第2回の制御構造の項では説明しませんでしたが、選択肢が多くあるときに、if より簡潔に表現できます。
「ここをクリック」という部分には、onmouseover（マウスカーソル通過時） onmouseout（マウスカーソルが外れたとき）のイベントに、move という関数を指定しています。マウスカーソルを当てようとすると、ランダムにウインドウを移動して、クリックできなくしています。この中の screen.height screen.width というのは、画面のサイズを参照するものです。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
var myX=0,myY=0;
function move()
{
var wh=screen.height-300;
var ww=screen.width-300;
var moX,moY;
window.resizeTo(300,300);
while(1)
{
moX=Math.floor(Math.random()*ww);
moY=Math.floor(Math.random()*wh);
if(Math.abs(myX-moX)>10 && Math.abs(myY-moY)>10)
{
window.moveTo(moX,moY);
myX=moX;
myY=moY;
break;
}
}
}
function sizex(elm)
{
switch(elm.value)
{
case "小さく":
window.resizeBy(-50,-50); break;
case "大きく":
window.resizeBy(50,50); break;
case "↑":
window.moveBy(0,-50); myY-=50; break;
case "←":
window.moveBy(-50,0); myX-=50; break;
case "→":
window.moveBy(50,0); myX+=50; break;
case "↓":
window.moveBy(0,50); myY+=50; break;
default:
}
}
function chgsize()
{
window.resizeTo(300,300);
window.moveTo(0,0);
}
window.onload=chgsize;
</script>
</head>
<body>
<form name="form01">
<input type="button" value="小さく" onclick="sizex(this)">
<input type="button" value="大きく" onclick="sizex(this)"><p>
<input type="button" value="←" onclick="sizex(this)">
<input type="button" value="↑" onclick="sizex(this)">
<input type="button" value="↓" onclick="sizex(this)">
<input type="button" value="→" onclick="sizex(this)"><p>
</form>
<a href="javascript:;" onmouseover="move()" onmouseout="move()">ここをクリック</a>
</body>
</html>
| 警告ダイアログ： |
alert(表示する文字列) |
| 確認ダイアログ： |
true/false = confirm(表示する文字列) |
| 入力ダイアログ： |
入力された文字列 = prompt(表示する文字列,初期入力されている文字列) |
特に alert は、色々なところで使用してきましたが、もう一度整理します。
ここをクリックしてください。まず prompt で、メールアドレスの入力を求めます。indexOf というのは、文字列を検索して、その位置（先頭は0）を返す（文字列がない場合は-1を返す）関数ですが、ここでは、"@" と
"." を検索して、共に1以上のときは先に進み、そでないときは alert で警告して再入力を求めます。次に confirm でアドレスが合っているか確認を求め、合っていたら、ウインドウに 「こんにちは」 と表示します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function msg()
{
var ml="",j,k,mok=false;
while(mok==false)
{
ml=prompt("メールアドレスを入力してください。",ml);
j=ml.indexOf("@");
k=ml.indexOf(".");
if(j>=1 && k>=1)
{
j=confirm("メールアドレスは " +ml+" で合っていますか？");
if(j==true)
{
document.write("こんにちは<br>");
document.write("あなたのメールアドレスは "+ml+" です。")
document.close();
mok=true;
}
}
else
alert(ml+" はメールアドレスとして変です。");
}
}
</script>
</head>
<body onload=msg()>
</body>
</html>
