Triển khai Onclick để trình duyệt quay lại trang trước với JavaScript

Quay lại trang trước với window.history

Sử dụng window.history.go(-1) hoặc window.history.back() để điều hướng về trang trước trong lịch sử duyệt web.

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Back Button</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        button { padding: 12px 24px; font-size: 16px; cursor: pointer; }
        .info { margin-top: 20px; color: #666; font-size: 14px; }
    </style>
</head>
<body>
    <h1>Quay lại trang trước (History Back)</h1>
    <button id="btnBack" onclick="goBack()">
        Quay lại trang trước
    </button>
    <div class="info">
        Lưu ý: Chỉ hoạt động nếu có lịch sử duyệt web (đã điều hướng từ trang khác).
        Nếu mở tab mới trực tiếp, nút này không có tác dụng.
    </div>

    <script>
        function goBack() {
            // Cách 1: history.back() - tương đương go(-1)
            window.history.back();
            
            // Cách 2: history.go(-1) - có thể go(-2), go(1) forward
            // window.history.go(-1);
            
            // Cách 3: Navigator (chỉ mobile PWA)
            // if (navigator.canGoBack) navigator.back();
        }
    </script>
</body>
</html>

Các phương thức History API

Lưu ý quan trọng

• Chỉ hoạt động trong **cùng origin** (same-origin policy).
• Không thể truy xuất URL lịch sử (bảo mật).
• Cần **user gesture** (click) - không tự động chạy khi load trang.
• Nếu ở trang đầu tiên (không có history), không có tác dụng.

Ứng dụng: Custom Back Button cho SPA

<button id="customBack">← Quay lại</button>

<script>
    const btn = document.getElementById('customBack');
    
    // Ẩn nút nếu không có history
    if (window.history.length <= 1) {
        btn.style.display = 'none';
    }
    
    btn.addEventListener('click', () => {
        // Kiểm tra trước khi back
        if (window.history.state && window.history.state.modalOpen) {
            closeModal(); // Xử lý custom state trước
        } else {
            window.history.back();
        }
    });
    
    // Lắng nghe popstate (user bấm back browser)
    window.addEventListener('popstate', (e) => {
        console.log('User navigated back/forward', e.state);
    });
</script>