JavaScriptでウェブページのタブを閉じたい【できる場合、できない場合】

2022.06.172020.06.23

JavaScriptでウェブページのタブを閉じるコードは、ブラウザ（あるいはバージョン）によって挙動が違います。ここで検証できます。

ネットで調べると「できる」と書いてあったのに、バージョンの関係なのか、うまくいかないことがあるのよね。結局、実際にコードを試して、実験するしかなさそうね。

この記事で説明すること

そもそもセキュリティによる制約がある

まず、基本的にはJavaScriptでは、
コードから開いたウィンドウは閉じることができるものの、
ユーザーが開いたウィンドウは閉じられません。

これは、セキュリティのためです。ページにアクセスしたときに、プログラムから勝手にタブを閉じられてしまうと、何が実行されたのか確認しにくくなるからです。

つまり、外部リンクから表示したページの場合は、「閉じる」ボタンを作ってもタブを閉じることはできない、ということになります。

ウェブページをアプリのように操作できるように、「閉じる」ボタンを付けたかったのですが、無理のようですね。

おとなしく、ブラウザのタブ操作で閉じてもらうしかなさそうです。

参考のため、いろいろ試した結果のコードを置いておきます。

タブを閉じるコードは、

window.close();

window.closeメソッドの動作を実際に検証してみましょう。

以下のコードを実行するボタンのHTML：

<input type="button" onclick="window.close();" value="window.close()">

外部から表示した場合、上のボタンは反応しません。

しかし、同じサイトで開いたタブなら閉じられます。

<p><a rel="noreferrer noopener" href="." target="_blank">【 新しいタブで開く 】</a></p>

どうやってタブが開かれたかで、挙動が変わるのね。

一度「空白ページ」として開いてから、閉じる場合はどうでしょう。
コードがこちら。

window.open('about:blank', '_self').close();

Chromeでは、以下のコードが有効なようです。
ただ、これはバグなのでいずれは修正されることが予想されます。

window.open('', '_self').close();

わたしのスマホでは、空白のページになるだけで、閉じられなかったよ。

ボタンではなく、アンカーリンクで「閉じる」場合も検証してみました。

<a href="javascript:void(0);" onclick="window.close();return false;">
【 閉じる [X] 】
</a>

アンカーリンクによるボタンはAMPのエラーが表示されたので、いったん削除して画像に差し替えています。

AMP > タグ「a」の属性「href」のURLプロトコルが無効です。

こちらもどうぞ。

QRコードを読み込むと、関連記事を確認できます。