表題の件、javascriptのwindow.close()について、いろいろとテストをしてみた。
結論から言うと、Google Chromeでは javascript の window.close() で自分自身を消すことができないです。効かないです、ハイ。
忙しい人や、とりあえず結果だけ知りたい人は別に以下読まなくてもいいんじゃね？以下は「できない」ことを検証しただけだから。
さてさて、
以下のような簡単なコードを書いてみてテストしてみる。
sample1.htm
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(document).on("click","#close_window",function(){
//自分自身を閉じる
window.close();
});
});
</script>
<button id="close_window">Close Window</button>
</body>
</html>
↑のHTMLファイルを作りChromeブラウザの「お気に入り」から（URLアドレス欄にパスを張り付けてもおなじ）「sample1.htm」を表示させてボタン「Close Window」を押すと、
というエラーが出て画面を閉じることができない。
一方で、「sample1.htm」のファイルを「ファイルの右クリック→プログラムから開く→Google Chrome」とすると
あら不思議、さっきまでウンともスンとも言わなかったのに見事にタブが消えるじゃありませんか。
もうちょっとツッコんでテストしてみる。
以下の２つのファイルを作ってみる。
sample2.htm
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
var childWindow;
$(document).on("click","#open_child_window",function(){
//別窓でsample3.htmを開く
childWindow = window.open("./sample3.htm","window_close_2","_blank");
});
$(document).on("click","#close_child_window",function(){
//別窓で開いたsample3.htmを閉じる
childWindow.close();
});
});
</script>
<button id="open_child_window">Open Child Window</button>
<button id="close_child_window">Close Child Window</button>
</body>
</html>
sample3.htm
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(document).on("click","#im_close",function(){
//自分自身を閉じる
window.close();
});
$(document).on("click","#close_parent",function(){
//自分自身開いた親を閉じる
window.opener.close();
});
});
</script>
<button id="im_close">Im Close</button>
<button id="close_parent">Close Parent Window</button>
</body>
</html>
例ごとく、Chromeの「お気に入り」から「sample2.htm」を開く。
ボタン「Open Child Window」を押すと普通に別窓で「sample3.htm」が開く。
別窓「sample3.htm」のボタン「Im Close」を押すと、別窓「sample3.htm」が普通に消えてくれる。
これは問題ないようだ。
もう一つのボタン「Close Parent Window」を押すと、これは効かない。
案の定、「Scripts may close only the windows that were opened by it.」だ。
さて、前の実験と同じく、「sample2.htm」を「ファイルの右クリック→プログラムから開く→Google Chrome」とすると
あら不思議、「Close Parent Window」も動作して「sample2.htm」が表示されているタブもスコッと消える。
最後にもう一つテスト。
以下の二つのファイルをつくる。
sample4.htm
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(document).on("click","#move_next",function(){
//sample4.htmに画面移動する
location.href="sample5.htm";
});
});
</script>
<button id="move_next">Move Next</button>
</body>
</html>
sample5.htm
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
$(function(){
//即座に自分自身を閉じる
window.close();
});
</script>
<span>ほげほげ！！</span>
</body>
</html>
これも同じように「お気に入り」からと「右クリック→プログラムから開く」で試してみると、
「お気に入り」のほうは「sample5.htm」が表示されたまま止まり、
「Scripts may close only the windows that were opened by it.」となるが、
「右クリック」のほうは「sample5.htm」が表示された瞬間に消える。
結論としては・・・・
- Google Chromeでは親タブ、親ウィンドウをJavascriptから（window.close()で）閉じることはできない。
- ただし、window.openで開いた子ウィンドであれば自分自身からでも親からでも閉じることができる。
- もちろん子ウィンドウから親ウィンドウは消すことはできない。
WEBサイトやWEBサービスを作るうえで、
「ファイルの右クリック→プログラムから開く→Google Chrome」なんてやるわけないから、
実質のところGoogle Chromeでは親画面（＝初期表示ウィンドウや初期表示タブ）はスクリプトから消すことはできないようだ。
まぁ考えてみればセキュリティ的にもUI的にもいきなり画面が消えるなんてことはＮＧだからっちゅうことかしらね。
ってことで、この記事を書くきっかけとなった「URL直打ちされてタブ画面として開かれてしまった画面を別ウィンドウに移動させる」という課題は頓挫いたしましたとさ、チャンチャン。
ちなみにIEでは自分自身をWindow.close()で消すことができます。ただ、「消していいですか？」的なダイアログがでるので、どっちみにユーザのクリック動作が必要になるけど。自動的にスコっとウィンドウやタブを落とすのはできないのね。