ウィンドウ

トップ > 逆引きリファレンス > ウィンドウ

別ウィンドウを開くには

リンク先のページを別ウィンドウで開くには、<a> タグに target 属性を指定します。_blank は常に新しいウィンドウを開きます。_blank の代わりに適当な名前を指定すると、その名前のウィンドウが既に存在していればそのウィンドウに、存在していなければその名前のウィンドウを新規に開いてそこに表示します。

HTML
<a href="xxx.html" target="_blank">XXX</a>

ウィンドウを閉じるには

ウィンドウを閉じるには、JavaScript の window.close() を用います。ユーザが意図しないのに勝手にウィンドウが閉じられてしまわないように、自分で開いたウィンドウ以外を閉じる時には本当にウィンドウを閉じても良いか確認のダイアログが表示されます。

HTML
<button onclick="window.close()">Close</button>

別ウィンドウの大きさを指定するには

開く別ウィンドウの大きさを指定するには、JavaScript の window.open() を使用します。window.open() はサイズや位置などを指定してウィンドウを開く機能を持っています。他にもツールバーやメニューバーの表示も制御することができます。<a href="..."> の機能を無効化するために return false; を指定しています。

HTML
<a href="xxx.html" onclick="
  window.open('index.htm', '_blank', 'width=200,height=200');
  return false;">XXX</a>

自ウィンドウの大きさを指定するには

自ウィンドウの大きさを変更するには、JavaScript の window.resizeTo() を用います。

HTML
<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 要素のパディング分小さい。
HTML
<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 を指定する方法があります。

HTML
<a href="xxx.html" onclick="window.open('index.htm',
  '_blank', 'width=200,height=200,resizable=no');
  return false;">XXX</a>

現在のウィンドウのリサイズを禁止するには、リサイズが行われた際に、強制的にサイズを指定した値に戻してしまう方法があります。

HTML
<body onresize="window.resizeTo(300, 300)">

メニューバーやツールバーを表示しないようにするには

メニューバーやツールバーを表示しないようにするには window.open() で menubar=no、toolbar=no を指定して別ウィンドウを開きます。

HTML
<button onclick="
 window.open('xx.htm', '_blank', 'menubar=no,toolbar=no')">Open</button>

今のところ、Internet Explorer では、自ウィンドウのメニューバーやツールバーの表示の有無を動的に変更することはできないようです。

子ウィンドウで入力した値を親ウィンドウに設定するには

子ウィンドウで入力した値を、親ウィンドウの入力フォームに設定するには、次のようなスクリプトを用います。opener は、自分のウィンドウを開いたウィンドウ(親ウィンドウ)を意味します。

HTML
【親ウィンドウ】
<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() を使用します。モーダルダイアログ表示中は、親ウィンドウの操作は一切禁止されます。

HTML
<script type="text/javascript">
<!--
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
<html>
<head>
<title>モーダルダイアログ</title>
<script type="text/javascript">
<!--
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>

Copyright (C) 2003-2017 杜甫々
初版: 2003年10月13日、最終更新:2017年12月17日
http://www.tohoho-web.com/how2/window.htm