リンク先のページを別ウィンドウで開くには、<a> タグに target 属性を指定します。_blank は常に新しいウィンドウを開きます。_blank の代わりに適当な名前を指定すると、その名前のウィンドウが既に存在していればそのウィンドウに、存在していなければその名前のウィンドウを新規に開いてそこに表示します。
<a href="xxx.html" target="_blank">XXX</a>
ウィンドウを閉じるには、JavaScript の window.close() を用います。ユーザが意図しないのに勝手にウィンドウが閉じられてしまわないように、自分で開いたウィンドウ以外を閉じる時には本当にウィンドウを閉じても良いか確認のダイアログが表示されます。
<button onclick="window.close()">Close</button>
開く別ウィンドウの大きさを指定するには、JavaScript の window.open() を使用します。window.open() はサイズや位置などを指定してウィンドウを開く機能を持っています。他にもツールバーやメニューバーの表示も制御することができます。<a href="..."> の機能を無効化するために return false; を指定しています。
<a href="xxx.html" onclick="
window.open('index.htm', '_blank', 'width=200,height=200');
return false;">XXX</a>
自ウィンドウの大きさを変更するには、JavaScript の window.resizeTo() を用います。
<script> window.resizeTo(300, 300); </script>
ウィンドウの大きさを知るにはいくつかの方法があります。
| カテゴリ | プロパティ | 備考 |
|---|---|---|
| ディスプレイの横幅 | screen.width | ディスプレイ自体の大きさ |
| screen.width | ||
| ウィンドウ外枠の横幅 | window.outerWidth | ウィンドウ内枠の横幅より、12～16px ほど大きい。 |
| ウィンドウ内枠の横幅 | window.innerWidth | ウィンドウの横幅 |
| document.documentElement.clientWidtn | ||
| $(window).width() | ||
| ボディクライアント領域の横幅 | document.body.clientWidth | ウィンドウ内枠の横幅より、body 要素のパディング分小さい。 |
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
window.addEventListener("resize", function() {
document.getElementById("sw").innerHTML = screen.width;
document.getElementById("saw").innerHTML = screen.availWidth;
document.getElementById("wow").innerHTML = window.outerWidth;
document.getElementById("wiw").innerHTML = window.innerWidth;
document.getElementById("ddecw").innerHTML = document.documentElement.clientWidth;
document.getElementById("jww").innerHTML = $(window).width();
document.getElementById("dbcw").innerHTML = document.body.clientWidth;
});
</script>
<div><span id="sw"></span> : screen.width</div>
<div><span id="saw"></span> : screen.availWidth</div>
<div><span id="wow"></span> : window.outerWidth</div>
<div><span id="wiw"></span> : window.innerWidth</div>
<div><span id="jww"></span> : $(window).width()</div>
<div><span id="ddecw"></span> : document.documentElement.clientWidth</div>
<div><span id="dbcw"></span> : document.body.clientWidth</div>
ウィンドウのリサイズ(大きさ変更)を禁止するには、window.open() で別ウィンドウを開き、resizable=no を指定する方法があります。
<a href="xxx.html" onclick="window.open('index.htm',
'_blank', 'width=200,height=200,resizable=no');
return false;">XXX</a>
現在のウィンドウのリサイズを禁止するには、リサイズが行われた際に、強制的にサイズを指定した値に戻してしまう方法があります。
<body onresize="window.resizeTo(300, 300)">
メニューバーやツールバーを表示しないようにするには window.open() で menubar=no、toolbar=no を指定して別ウィンドウを開きます。
<button onclick="
window.open('xx.htm', '_blank', 'menubar=no,toolbar=no')">Open</button>
今のところ、Internet Explorer では、自ウィンドウのメニューバーやツールバーの表示の有無を動的に変更することはできないようです。
子ウィンドウで入力した値を、親ウィンドウの入力フォームに設定するには、次のようなスクリプトを用います。opener は、自分のウィンドウを開いたウィンドウ(親ウィンドウ)を意味します。
【親ウィンドウ】
<form name="f1">
<input type="text" name="t1">
<input type="button" onclick="window.open('child.htm',
'_blank', 'width=200,height=200,titlebar=no,toolbar=no')"
value="参照...">
</form>
【子ウィンドウ】
<form>
<input type="text" name="t2">
<input type="button" value="OK"
onclick="opener.document.f1.t1.value=this.form.t2.value; window.close();">
</form>
モーダルダイアログを表示するには showModalDialog() を使用します。モーダルダイアログ表示中は、親ウィンドウの操作は一切禁止されます。
<script>
function func() {
var args = new Array();
args[0] = window;
args[1] = document.f1.t1.value;
args[2] = document.f1.t2.value;
val = showModalDialog("test2.html", args,
"dialogHeight:100px;dialogWidth:300px");
}
</script>
<form name="f1">
<input type="text" name="t1">
<input type="text" name="t2">
<input type="button" value="OK" onclick="func()">
</form>
表示されるダイアログの内容も HTML で記述します。dialogArguments で親ウィンドウからの値を取得することができます。また、returnValue で親ウィンドウに値を返すことができます。
<html>
<head>
<title>モーダルダイアログ</title>
<script>
var win;
function init() {
win = window.dialogArguments[0];
document.f2.t1.value = window.dialogArguments[1];
document.f2.t2.value = window.dialogArguments[2];
}
function OnOK() {
win.document.f1.t1.value = document.f2.t1.value;
win.document.f1.t2.value = document.f2.t2.value;
window.returnValue = true;
window.close();
}
</script>
</head>
<body onload="init()">
<form name="f2">
<input type="text" name="t1">
<input type="text" name="t2">
<input type="button" value="OK" onclick="OnOK()">
</form>
</body>
</html>