Botão de Voltar Inteligente no Seu Site com JavaScript - Bruno Devx - BR Criativus

post #5851

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:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=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