JavaScriptでウェブページのタブを閉じるコードは、ブラウザ（あるいはバージョン）によって挙動が違います。ここで検証できます。
ネットで調べると「できる」と書いてあったのに、バージョンの関係なのか、うまくいかないことがあるのよね。結局、実際にコードを試して、実験するしかなさそうね。
1. そもそもセキュリティによる制約がある
まず、基本的にはJavaScriptでは、
コードから開いたウィンドウは閉じることができるものの、
ユーザーが開いたウィンドウは閉じられません。
これは、セキュリティのためです。ページにアクセスしたときに、プログラムから勝手にタブを閉じられてしまうと、何が実行されたのか確認しにくくなるからです。
つまり、外部リンクから表示したページの場合は、「閉じる」ボタンを作ってもタブを閉じることはできない、ということになります。
ウェブページをアプリのように操作できるように、「閉じる」ボタンを付けたかったのですが、無理のようですね。
おとなしく、ブラウザのタブ操作で閉じてもらうしかなさそうです。
1-1. window.closeメソッド
参考のため、いろいろ試した結果のコードを置いておきます。
タブを閉じるコードは、
window.close();window.closeメソッドの動作を実際に検証してみましょう。
以下のコードを実行するボタンのHTML：
<input type="button" onclick="window.close();" value="window.close()">外部から表示した場合、上のボタンは反応しません。
しかし、同じサイトで開いたタブなら閉じられます。
<p><a rel="noreferrer noopener" href="." target="_blank">【 新しいタブで開く 】</a></p>どうやってタブが開かれたかで、挙動が変わるのね。
1-2. いったんopenしてからcloseする
一度「空白ページ」として開いてから、閉じる場合はどうでしょう。
コードがこちら。
window.open('about:blank', '_self').close();Chromeでは、以下のコードが有効なようです。
ただ、これはバグなのでいずれは修正されることが予想されます。
window.open('', '_self').close();わたしのスマホでは、空白のページになるだけで、閉じられなかったよ。
2. リンクでwindow.closeするパターンは？
ボタンではなく、アンカーリンクで「閉じる」場合も検証してみました。
<a href="javascript:void(0);" onclick="window.close();return false;">
【 閉じる [X] 】
</a>
2-1. 追記：タグ「a」の属性「href」の URL プロトコルが無効です（2020年9月9日）
アンカーリンクによるボタンはAMPのエラーが表示されたので、いったん削除して画像に差し替えています。
AMP > タグ「a」の属性「href」のURLプロトコルが無効です。
