サブウィンドウは、windowオブジェクトのopenメソッドによって開くことができます。
ウィンドウを開くと、オブジェクトのインスタンス変数が返却されますので、保存しておきます。
このインスタンス変数を利用することにより、ウィンドウに対する各種操作が可能となります。
以下に、サブウィンドウを開くときのサンプルソースを示します。
var win;
function openWin() {
// サブウィンドウを開く
win = window.open('', 'win01', 'width=300,height=100');
// サブウィンドウの内容を表示する
win.document.open();
win.document.write('<html><body>');
win.document.write('サブウィンドウ');
win.document.write('</body></html>');
win.document.close();
}
|
ウィンドウを閉じる場合には、ウィンドウ内でオープンしたサブウィンドウは閉じることが多いです。
この場合、単にcloseメソッドを呼び出すと、ウィンドウをまだ開いていなかったり、終了アイコンなどで閉じてしまっていたりすると、JavaScriptではエラーとなってしまいます。
そこで、オブジェクトの存在と、ウィンドウの状態をチェックしてから閉じる必要があります。
チェックには、typeof(オブジェクト)と、オブジェクト.closedを使います。
ウィンドウを閉じると、ウィンドウ内の変数のなくなってしまうため、データ入力画面などでは、終了確認をするのがいいでしょう。
終了確認は、confirmを使います。
また、自分自身のウィンドウを閉じると、「ウィンドウは表示中のWebページによって閉じられようとしています」という内容の警告メッセージが表示されます。
これは、メニュー画面やログイン画面に戻るようにすることで解決できます。
この場合、self.location.hrefを使います。
以下に、ウィンドウを閉じるときのサンプルソースを示します。
終了確認をして、サブウィンドウを閉じてから、メニュー画面に戻っています。
function closeWin() {
// 終了確認をする
flag = confirm('終了してよろしいですか？');
if (!flag) { return; }
// サブウィンドウを閉じる
if ((typeof(win) == 'object') && (!win.closed)) {
win.close();
}
// メニューに戻る
self.location.href='index.htm';
}
|
上記のサンプルソースを使って、JavaScriptを使って、サブウィンドウをオープン、クローズしてみましょう。