ウィンドウのクローズ
前回の投稿ではウィンドウをオープンを試しました。
今回は開いたウィンドウを閉じてみます。
まずは親ウィンドウとなるHTMLを用意します。
jqueryと、main.jsを読み込んでいます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="./jquery.js"></script>
<script src="./main.js"></script>
</head>
<body>
親ウィンドウ
</body>
</html>
次に、main.jsの中身です。
$(function(){
//新規ウィンドウを開く
let w = window.open("test.html", "test", "width=400,height=500");
});
スクリプトがロードされたら問答無用で新しいウィンドウ(test.html)を開いています。
test.htmlの中身は次のように書いておきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test window</title>
<script src="./jquery.js"></script>
<script src="./sub.js"></script>
</head>
<body>
test window
<div id="cwindow">ウィンドウを閉じる</div>
</body>
</html>
最後にsub.jsを用意します。
$(function(){
$("#cwindow").click(function(){
window.close();
});
});
これも、シンプルに「
ウィンドウを閉じる
」のdivタグがクリックされた時にウィンドウを閉じる命令を書いています。
ここまでの一連のファイルで、親ウィンドウから子ウィンドウを開いて、子ウィンドウのリンクをクリックすると、子ウィンドウが閉じる。
という動きになります。
ウィンドウのクローズ時の注意点
ここで、注意が必要なのは、子ウィンドウを閉じる時の命令です。
上記の例では、windowオブジェクトを直接使っていますが、
親ウィンドウで生成した
let w = window.open("test.html", "test", "width=400,height=500");
の「w」を使って、
w.close();
という命令もありますが、この例ではそれは動作しません。
動作しない理由としては、親ウィンドウで定義した「w」に子ウィンドウからアクセスできない為に子ウィンドウを閉じることができません。