はじめに
JavaScriptで新規ウインドウを表示するコードを書いていて、ちょっとつまづいたので、今さらながらJavaScriptのwindow.openや親子ウインドウの制御について調べてみました。※以下のコードはすべてIE7で検証しています。
技術評論社
売り上げランキング: 17,179
window.openメソッドの使い方
window.openメソッドの第1パラメタには、表示するファイルを指定します。第2パラメタにはウインドウの名前、第3パラメタには、子ウインドウに対するオプションを指定します。第1パラメタ以外は、省略可能です。(ちなみにwindow.の部分も省略可能です。)
var childWindow = window.open(url, windowName, [options]); または var childWindow = open(url, windowName, [options]);
window.openメソッドのオプショナル引数
第3パラメタの[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(); } }
関連エントリ
*1:IE6では、正しく動作しないバグがあるようです。バグ: window.closed プロパティ不適切な値を返します