今さらながらJavaScriptのwindow.openについて調べてみた。

はじめに

JavaScriptで新規ウインドウを表示するコードを書いていて、ちょっとつまづいたので、今さらながらJavaScriptのwindow.openや親子ウインドウの制御について調べてみました。※以下のコードはすべてIE7で検証しています。

ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)

posted with amazlet at 13.01.23

外村和仁
技術評論社
売り上げランキング: 17,179

window.openメソッドの使い方

window.openメソッドの第１パラメタには、表示するファイルを指定します。第２パラメタにはウインドウの名前、第３パラメタには、子ウインドウに対するオプションを指定します。第１パラメタ以外は、省略可能です。（ちなみにwindow.の部分も省略可能です。）

var childWindow = window.open(url, windowName, [options]);
または
var childWindow = open(url, windowName, [options]);

window.openメソッドのオプショナル引数

第３パラメタの[options]の部分には、ウインドウのサイズや表示位置、スクロールバーの表示有無などを指定できます。たとえば、ウインドウの横幅を50pxとする場合は、width=50という形式で指定します。スタイルシートのように:で値を指定するのではないので、間違えないようにしましょう。

IEがサポートしているオプションは、以下になります。

パラメタ名	説明	値
width	ウインドウの横幅	-
height	ウインドウの縦幅	-
left	ウインドウを表示する位置（左端からの位置）	-
top	ウインドウを表示する位置（上端からの位置）	-
menubar	メニューバーの表示有	デフォルトは表示表示：1、非表示：0
toolbar	ツールバーの表示有	デフォルトは表示表示：1、非表示：0
location	ロケーションの表示有	デフォルトは表示表示：1、非表示：0
titlebar	タイトルバーの表示有	デフォルトは表示表示：1、非表示：0
status	ステータスバーの表示有	デフォルトは表示表示：1、非表示：0
resizable	ウインドウサイズの変更可否	デフォルトは可能可：1、否：0
scrollbars	スクロールバーの表示有	デフォルトは表示表示：1、非表示：0
channelmode	チャネルモードで開く（最大化して表示）	デフォルトは通常表示最大化して表示：1、通常表示：0
fullscreen	フルスクリーンモードで開く（全画面表示）	デフォルトは通常表示全画面表示：1、通常表示：0

ウインドウの位置

子ウインドウを画面の中央に表示する

子ウインドウを画面の中央に表示する場合、(画面サイズ - ウィンドウ幅) / 2で求めたx座標とy座標をそれぞれ、leftとtopに指定します。詳しくは、以下のサイトに書かれています。

<script language="javascript" type="text/javascript" charset="UTF-8">
onload = function() {
  document.getElementById("openChild").onclick = function() {
    var url = "child.html";
    var windowName = "childWindow";
    var winWidth = "400";
    var winHeight = "300";
    var x = (screen.width - winWidth) / 2;
    var y = (screen.height - winHeight) / 2; 
    var options = "width=" + winWidth + ", \
                   height=" + winHeight + ", \
                   left="+ x + ", \
                   top=" + y;
    open(url, windowName, options);
  }
}
</script>

親子ウインドウの制御

親ウインドウから子ウインドウを閉じる

親ウインドウから子ウインドウを閉じる場合は、window.open()によって取得したウインドウオブジェクトのclose()メソッドを呼び出します。

var ChildWindow = window.open(url);
ChildWindow.close();

子ウインドウから親ウインドウが存在するかどうかを調べる

子ウインドウから親ウインドウが存在するかどうかを調べるには、window.opener.closedプロパティを参照します。*1

function IsExistParent() {
  return window.opener.closed;
}

親ウインドウが閉じたら、子ウインドウを閉じる

// 親ウインドウのonunloadイベントで、子ウインドウを閉じる
onunload = function() {
  // 子ウインドウを閉じる
  if(!childWindow) return false; 
  childWindow.close();
}

親子ウインドウ制御のサンプル

親ウインドウ側のHTML（parentWindow.html）

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>親ウインドウ</title>
<script type="text/javascript" src="parentWindow.js" charset="UTF-8"></script>
</head>
<body>
<h1>親ウインドウ</h1>
<input type="button" id="openChild" name="openChild" value="子ウインドウを表示する">
<input type="button" id="closeChild" name="closeChild" value="子ウインドウを閉じる">
<input type="button" id="closeMyWindow" name="closeMyWindow" value="自分自身のウインドウを閉じる">
</body>
</html>

親ウインドウ側のJavaScript（parentWindow.js）

var childWindow; // 子ウインドウオブジェクト
onload = function() {
  document.getElementById("openChild").onclick = function() {
    var url = "childWindow.html";
    var windowName = "ChildWindow";
    var winWidth = "400";
    var winHeight = "300";
    var x = (screen.width - winWidth) / 2;
    var y = (screen.height - winHeight) / 2; 
    var options = "width=" + winWidth + ", \
                   height=" + winHeight + ", \
                   left="+ x + ", \
                   top=" + y + ", \
                   menubar=0, \
                   toolbar=0, \
                   location=0, \
                   status=0, \
                   resizable=0, \
                   scrollbars=0, \
                   titlebar=1, \
                   channelmode=0,\
                   fullscreen=0";
    childWindow = open(url, windowName, options);
  }
  
  // 親ウインドウが閉じるした際に、子ウインドウも閉じる
  onunload = function() {
    // 子ウインドウを閉じる
    if(!childWindow) return false; 
    childWindow.close();
  }
  
  // 子ウインドウを閉じる
  document.getElementById("closeChild").onclick = function() {
    if(!childWindow) return false; 
    childWindow.close();
  }
  
  // 自分自身のウインドウを閉じる
  document.getElementById("closeMyWindow").onclick = function() {
    close();
  }
}

子ウインドウ側のHTML(childWindow.html)

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>子ウインドウ</title>
<script type="text/javascript" src="childWindow.js" charset="UTF-8"></script>
</head>
<body>
<h1>子ウインドウ</h1>
<input type="button" id="IsExistParent" name="IsExistParent" value="親ウインドウが閉じられているか？">
<input type="button" id="closeMyWindow" name="closeMyWindow" value="自分自身のウインドウを閉じる">
</body>
</html>

子ウインドウ側のJavaScript(childWindow.js)

onload = function() {
  // 親ウインドウが存在するかどうかを返す
  document.getElementById("IsExistParent").onclick = function() {
    // 子ウインドウ単独でオープンされた場合、openerがいないので、それをチェックする
    if(!opener) {
      alert(true);
    }
    else {
      alert(opener.closed);
    }
  }
  
  // 自分自身のウインドウを閉じる
  document.getElementById("closeMyWindow").onclick = function() {
    close();
  }
}