post

Botão de Voltar Inteligente no Seu Site com JavaScript

Publicado em: 25/11/2024 / Atualizado em: 25/11/2024

Categorias: BlogJavaScript (JS)JS

Adicionar um botão de “voltar” em seu site pode melhorar a experiência do usuário, mas e se você quiser garantir que o botão funcione apenas para páginas dentro do seu domínio? Neste post, vamos mostrar como criar um botão de voltar inteligente com JavaScript que verifica a origem da página anterior. Caso o usuário tenha vindo de outro site, o botão redireciona para a página inicial automaticamente.

O código JavaScript

Aqui está o código que você pode adicionar ao seu site para criar o botão de voltar inteligente:

// Função para lidar com o botão de voltar
function handleBackButton() {
    // Obter o referer (página anterior)
    const previousUrl = document.referrer;

    // Obter a URL base do site
    const homeUrl = `${window.location.protocol}//${window.location.hostname}`;

    // Verificar se o referer é do mesmo domínio
    if (previousUrl && previousUrl.includes(window.location.hostname)) {
        // Voltar para a página anterior
        window.history.back();
    } else {
        // Redirecionar para a página inicial
        window.location.href = homeUrl;
    }
}

// Adicionar evento a todos os botões com a classe "backButton"
document.querySelectorAll('.backButton').forEach(button => {
    button.addEventListener('click', function() {
        handleBackButton();
    });
});

Como implementar no HTML

Adicione o código JavaScript ao seu site dentro de uma tag <script> ou em um arquivo JavaScript externo. Em seguida, crie os botões de voltar usando a classe backButton:

<button class="backButton">Voltar</button>
<button class="backButton">Retornar</button>

Com isso, todos os botões com a classe backButton terão o mesmo comportamento.

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/5851

ID de Referência: 5851

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários