Feche a guia do navegador em uma janela do navegador
Existem algumas situações específicas em que fechar uma guia do navegador pode ser necessário e essencial, especialmente se você estiver desenvolvendo sites que suportam sistemas de pagamento (é claro, pode haver outros casos de uso possíveis). Durante uma transação online, uma sessão é criada e várias coisas acontecem em segundo plano; e durante esse tempo, o trabalho do navegador é exibir a resposta vinda do servidor para que o cliente ou usuário possa ver o que exatamente está acontecendo.
Depois que a transação for concluída, devemos fechar a sessão que está acontecendo atualmente dentro dessa guia do navegador em particular para que nenhum uso indevido de informações pessoais possa ocorrer. Portanto, isso pode ser feito fechando essa guia do navegador em particular.
Você deve ter visto este cenário, onde você faz a transação online através do portal do banco e, depois de sair da conta do net banking, o banco exibe um texto na tela que nos diz para fechar a janela do navegador. Obviamente, você pode usar o botão Fechar no navegador ou também criar um botão Fechar e pedir ao usuário para clicar nele. Vamos ver como podemos conseguir isso em detalhes.
Fechar a guia do navegador usando o método window.close() em JavaScript
Para fechar uma guia do navegador, JavaScript nos fornece um método associado a um objeto de janela, e esse método é chamado window.close(). Usando esse método, podemos facilmente atingir nosso objetivo de fechar uma guia do navegador. Você também pode usar diretamente o método close() sem usar a palavra-chave janela também. Este método é compatível com todos os navegadores modernos, como Chrome, Brave e Firefox.
Então, vamos ver como implementar esse método em JavaScript e fechar a guia do navegador. Dentro do nosso documento HTML, temos uma tag body que contém uma tag âncora e uma tag script. O script será usado para vincular nosso arquivo JavaScript ao documento HTML. A tag âncora representará o botão com o qual realizaremos a operação de fechamento da guia do navegador. O estilo para esta tag âncora, nosso botão, é feito dentro da tag style. Esta tag âncora aponta para a função close_tab(), que está presente dentro de nosso arquivo de script.
<!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>
Dentro do nosso arquivo script.js, temos uma função chamada close_tab(), que será executada somente quando o usuário clicar no botão fechar a aba do navegador presente em nosso documento HTML.
function close_tab() {
if (confirm('Do you want to close this tab?')) {
window.close();
}
}
Aqui, também usaremos outro método conhecido como confirm(), que recebe uma string como parâmetro. Este método mostrará um pop-up ou caixa de alerta com a string que passamos para confirm() como parâmetro, e também terá os botões Ok e Cancel. E estamos chamando esse método dentro da instrução if porque essa função retornará valores true ou false.
Portanto, se o usuário pressionou o botão cancel, a função confirm() retornará false. Se o usuário pressionar o botão Ok, a função retornará true. Se a função close() retornar false então nosso bloco if não será executado e se retornar true então apenas nosso bloco if será executado e então nossa função window.close() Será executado. Em seguida, fechará a guia do navegador.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn