Back button với Javascript

Nay có 1 người bạn hỏi mình chỗ này nên chia sẻ lại với mọi người luôn.

Đề bài: có 1 trang chi tiết sản phẩm, trang này có thể truy cập từ trang danh mục của các danh mục khác nhau (1 sản phẩm có nhiều danh mục).

Yêu cầu: thêm 1 nút Back ở trang chi tiết sản phẩm back lại trang trước đó trong web site của mình, nếu không thì quay trở lại trang danh mục mặc định.

Lời giải:

• JQuery

$('#back-button').on('click', function () {
    let shouldBack = document.referrer.startsWith(location.origin) 
                  && document.referrer != location.href;
    shouldBack ? history.back() 
               : location.replace(event.target.getAttribute('data-default-url'))
});

• Pure JS

document
    .getElementById('back-button')
    .addEventListener('click', function (event) {
        let shouldBack = document.referrer.startsWith(location.origin) 
                      && document.referrer != location.href;
        shouldBack ? history.back() 
                   : location.replace(event.target.getAttribute('data-default-url'))
    });

Giải thích:

Kiểm tra xem trang trước đó (document.referer) có phải là trang web của mình không và nó có phải trang hiện tại hay không.

Nếu là web của mình và không phải trang hiện tại thì gọi hàm history.back() ngược lại mở defaultUrl

Kết: trên đây là cách làm của mình, mọi người có ý kiến gì thì để lại comment nhé 😀