Закройте вкладку браузера в окне браузера

Есть некоторые конкретные ситуации, когда закрытие вкладки браузера может быть необходимым и важным, особенно если вы разрабатываете веб-сайты, поддерживающие платежные системы (конечно, могут быть и другие возможные варианты использования). Во время онлайн-транзакции создается сеанс, и различные вещи происходят в фоновом режиме; и в течение этого времени задача браузера - отображать ответ, исходящий от сервера, чтобы клиент или пользователь могли видеть, что именно происходит.

После завершения транзакции мы должны закрыть сеанс, который в настоящее время происходит внутри этой конкретной вкладки браузера, чтобы не могло произойти неправильное использование личной информации. Таким образом, это можно сделать, закрыв конкретную вкладку браузера.

Возможно, вы видели этот сценарий, в котором вы выполняете транзакцию онлайн через портал банка, а затем после выхода из учетной записи сетевого банкинга банк отображает на экране текст, который говорит нам закрыть окно браузера. Конечно, вы можете использовать кнопку закрытия в браузере или создать кнопку закрытия и попросить пользователя щелкнуть по ней. Давайте посмотрим, как мы можем этого добиться.

Закройте вкладку браузера с помощью метода window.close() в JavaScript

Чтобы закрыть вкладку браузера, JavaScript предоставляет нам метод, связанный с объектом окна, и этот метод называется window.close(). Используя этот метод, мы можем легко достичь нашей цели - закрыть вкладку браузера. Вы также можете напрямую использовать метод close() без использования ключевого слова window. Этот метод поддерживается всеми современными браузерами, такими как Chrome, Brave и Firefox.

Итак, давайте посмотрим, как реализовать этот метод в JavaScript и закрыть вкладку браузера. Внутри нашего HTML-документа у нас есть тег тела, который содержит тег привязки и тег скрипта. Скрипт будет использоваться для связывания нашего файла JavaScript с документом HTML. Тег привязки будет представлять кнопку, с помощью которой мы будем выполнять операцию закрытия вкладки браузера. Стиль этого тега привязки, нашей кнопки, выполняется внутри тега style. Этот тег привязки указывает на функцию close_tab(), которая присутствует внутри нашего файла сценария.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-top: 50px;
            margin-left: 50px;
        }
        a{
            width: 100px;
            height: 50px;
            background-color: brown;
            color: #ffffff;
            text-decoration: none;
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- This is a button -->
    <a href="javascript:close_tab();">close browser tab</a>

    <script src="script.js"></script>  
</body>
</html>

Внутри нашего файла script.js у нас есть функция под названием close_tab(), которая будет выполняться только тогда, когда пользователь нажимает кнопку close browser tab, присутствующую в нашем HTML-документе.

function close_tab() {
  if (confirm("Do you want to close this tab?")) {
    window.close();
  }
}

Здесь мы также будем использовать другой метод, известный как confirm(), который принимает строку в качестве параметра. Этот метод покажет всплывающее окно или окно с предупреждением со строкой, которую мы передали в confirm() в качестве параметра, а также будет иметь кнопки Ok и Cancel. И мы вызываем этот метод внутри оператора if, потому что эта функция возвращает значения true или false.

browser_tab

Итак, если пользователь нажал кнопку cancel, то функция confirm() вернет false. Если пользователь нажмет кнопку Ok, то функция вернет true. Если функция close() возвращает false, то наш блок if не будет выполнен, а если он вернул true, то будет выполнен только наш блок if, а затем наша функция window.close() Будет выполнено. Затем закроется вкладка браузера.