Nút Quay lại trình duyệt thay đổi url động Tham số

Question

Tôi đang làm việc trên trang web, nơi thông số url được cập nhật dựa trên hành động của người dùng, theo đó tôi cập nhật trang web mà không cần làm mới. Hãy xem xét kịch bản của Thương mại điện tử nơi url thay đổi khi người dùng nhấp vào bộ lọc và sau đó các sản phẩm được cập nhật sẽ được hiển thị.

Bây giờ vấn đề là, khi người dùng nhấp vào nút quay lại của trình duyệt, trình duyệt quay lại tham số url trước đó, nhưng trang không bị thay đổi. Tôi muốn thay đổi trang cũng dựa trên tham số url được thay đổi sau khi nút quay lại được nhấp.

Tôi đã thử giải pháp này:

$($window).on('popstate', function (e) { 
    // Update the page also 
}); 

Vấn đề với mã này được, điều này bị sa thải như những thay đổi url, có nghĩa là nó không quan tâm nếu trình duyệt lại nút được nhấn vào, hoặc url đang thay đổi bằng cách sử dụng jQuery. Vì vậy, nếu tôi thay đổi url dựa trên tương tác của người dùng, gọi lại popstate cũng sẽ được gọi và chức năng tùy chỉnh của tôi. Để cập nhật trang tôi đang sử dụng các yêu cầu https, vì vậy http api được gọi hai lần.

Có cách nào để kiểm tra xem nút "Quay lại" có được nhấp không?

Answer 1

Tôi khuyên bạn nên thay đổi thiết kế của bạn một chút sáng và kích hoạt tất cả nội dung cập nhật (danh sách sản phẩm trong trường hợp của bạn) bằng cách nghe thay đổi url, không chỉ thay đổi url gây ra bởi nút quay lại. Vì vậy, thay vì kích hoạt bất kỳ hiển thị lại trên các sự kiện nhấp chuột, hãy để các nút này được liên kết thường xuyên đến url đại diện cho nội dung của bạn và kích hoạt chức năng từ sự kiện popstate.

Đây là cách tất cả các khung MVVM như Angular.js, Backbone vv được thiết kế và có nghĩa là để được sử dụng.

Bằng cách thực hiện việc này, bạn cũng sẽ dễ dàng hơn trong việc duy trì ứng dụng trong thời gian dài.

Chúc may mắn!