Antes de falarmos sobre como exibir uma mensagem e depois redirecionar o usuário para outra página, vamos falar um pouco sobre as propriedades window.location e window.location.href.

Existem duas formas de fazer o redirecionamento:

  1. window.location = "//www.devmedia.com.br/";
  2. window.location.href = "//www.devmedia.com.br/";

Você já deve ter notado que usando qualquer um dos dois métodos o efeito é o mesmo. Isso acontece por que os objetos têm métodos que são padrão, nesse caso, se você omitir o .href, o navegador entenderá que você está se referindo ao método window.location.href.

Agora vamos mostrar como exibir um alert e redirecionar o usuário. O JavaScript é executado pelos navegadores linha por linha, ou seja, para conseguir esse efeito de redirecionamento basta você digitar um alert e em seguida alterar a propriedade window.location. Como na Listagem 1.

Listagem 1: Exibe um alert e redireciona para a página da DevMedia.
<html>
<head>
<title>window.location</title>
<script type="text/javascript">
    alert("Você será redirecionado");
    window.location="//www.devmedia.com.br/";
</script>
</head>
<body>
</body>
</html>
Resultado da Listagem 1
Figura 1: Resultado da Listagem 1.

Na Listagem 2 vamos agora mostrar um exemplo de como exibir uma mensagem e redirecionar ao clicar em um botão.

Listagem 2: Exibe um alert e redireciona para a página da DevMedia ao clicar no botão.
<html>
<head>
<title>window.location ao clicar em um botão</title>
<script type="text/javascript">
function redirecionar(){
    alert("Você será redirecionado");
    window.location="//www.devmedia.com.br/";
}
</script>
</head>
<body>
<button onclick="redirecionar();">Clique aqui</button>
</body>
</html>

Na Listagem 2 criei um button e coloquei no evento onclick uma função que exibe uma mensagem e redireciona para a página da DevMedia

Resultado da Listagem 2
Figura 2: Resultado da Listagem 2.

Por fim, na Listagem 3 vamos criar um evento de confirmação onde será exibida uma mensagem questionando se o usuário deseja que a página seja redirecionada, caso o usuário confirme, será levado à página da DevMedia.

Listagem 3: Exibe uma confirmação e se for aceito e redireciona para a página da devmedia ao clicar no botão.
<html>
<head>
<title>window.location que exibe uma confirmação ao clicar em um botão</title>
<script type="text/javascript">
function redirecionar(){
    if(confirm("Deseja ser redirecionado?")){
        window.location="//www.devmedia.com.br/";
    }
}
</script>
</head>
<body>
<button onclick="redirecionar();">Clique aqui</button>
</body>
</html>
Resultado da Listagem 3
Figura 3: Resultado da Listagem 3.

Como vimos, é bastante simples exibir uma mensagem informativa ou de confirmação antes de redirecionar o usuário para outra página. No caso mais simples, basta adicionar o comando de redirecionamento após o alert, pois a execução linear do código garantirá que o endereço será alterado logo após o fechamento da caixa de diálogo.