Voltar para a Página Anterior em JS: Botão 'Cancelar'
Resposta Rápida
Para navegar o usuário de volta à página da web anterior, você precisa conectar a chamada da função window.history.back() ao manipulador de eventos onclick. Esse manipulador pode ser colocado diretamente na marcação do botão:
<button onclick="window.history.back()">Voltar</button>O botão descrito acima ativa a transição para a página anterior quando clicado, semelhante à ação de "voltar" no navegador.
Recursos e Funcionalidades Adicionais
Prevenir Submissão de Formulário
Para evitar a submissão do formulário durante a navegação, você pode usar return false; dentro do onclick:
<button onclick="window.history.back(); return false;">Cancelar</button>Voltar Várias Páginas
Para voltar várias páginas no histórico do navegador, utilize a função history.go(-x). Aqui, x é o número de páginas que você deseja especificar:
<button onclick="history.go(-2)">Voltar Duas Páginas</button>Substituir Botão por um Link
Às vezes, é mais apropriado usar um link estilizado em vez de um botão:
<a href="#" onclick="window.history.back(); return false;">Voltar</a>Adicionar javascript:void(0); no atributo href permite desativar o comportamento padrão do link enquanto mantém a navegação através do evento onclick.
Sobre a Função back()
As funções window.history.back() e history.back() são intercambiáveis. No entanto, usar o prefixo window melhora a legibilidade do código e ajuda a evitar mal-entendidos em contextos com várias janelas.
Chamada Clara para Ação
Ênfase Visual no Botão "Cancelar"
Para melhorar a interação do usuário no site, você pode aumentar a visibilidade do botão "Cancelar" usando estilos CSS:
.cancel-button {
background-color: #f44336; /* A cor vermelha torna o botão mais chamativo */
color: white;
}Exemplo de Uso Prático
Aplicando uma classe para estilizar o botão:
<button onclick="window.history.back(); return false;" class="cancel-button">Cancelar</button>Esclarecendo o Propósito do Botão
Se o botão for usado para navegação, em vez de submissão de formulário, especifique seu tipo como button:
<button type="button" onclick="window.history.back();">Voltar</button>Trabalhando com JavaScript Embutido
Resolvendo Conflitos
Para separar o JavaScript do HTML e simplificar o processo de depuração, você pode configurar o evento onclick diretamente pelo JavaScript:
document.getElementById('goBackButton').addEventListener('click', function() {
history.back();
});Partes de Código Desnecessárias
O prefixo window. não é obrigatório, mas pode ajudar iniciantes a entender o código mais rapidamente:
<button onclick="window.history.back(); return false;">Voltar</button>Visualização
Se você pensar na história do navegador como uma linha do tempo, é fácil entender os princípios de navegação:
1. Início: Início 🏠
2. Ir para a Loja 🏪 (via link)
3. Ir para o Parque 🌳 (via outro link)
4. Retornar ao Ponto Anterior: 🌳 ➡️ 🏪 O JavaScript permite gerenciar o histórico:
function goBack() {
window.history.back();
}Considerações Adicionais
Compatibilidade entre Navegadores
As funções history.back() e history.go(-1) são suportadas pela maioria dos navegadores. No entanto, a compatibilidade com versões mais antigas deve ser considerada.
Manipulação em um Ambiente Dinâmico
Em aplicações de página única ou ao carregar conteúdo dinamicamente, é importante garantir que as transições sejam adequadamente refletidas no histórico do navegador.
Gerenciando Histórico
Para simplificar a navegação do usuário, use os métodos history.pushState() e history.replaceState(), que permitem gerenciar entradas no histórico de navegação.
Monitorando Mudanças no Histórico
O evento window.onpopstate permite que você responda a momentos em que o estado da interface do usuário muda.
Recursos Úteis
- Propriedade Window.history - Web API | MDN — Informações básicas sobre o uso da API de histórico para navegação.
- Botão Voltar | CSS-Tricks — Um guia simples para criar um botão de voltar.
- O Método back() do Histórico — Tutorial sobre como usar o método back() em JavaScript.
- Evento Click - Web API | MDN — Descrição detalhada do evento click em JavaScript.
- Evento Click | Documentação da API jQuery — Gerenciando eventos de clique com jQuery.
- Eventos de Borbulhamento e Captura — Artigo sobre o mecanismo de propagação de eventos no DOM.
- JavaScript - O que são Eventos de Borbulhamento e Captura? - Stack Overflow — Discussão sobre eventos de borbulhamento e captura no fórum Stack Overflow.