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é 😀

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.