Có cách nào trong History.js để biết khi nào nút quay lại được nhấn

Question

Tôi đã bắt đầu kiểm tra History.js. Sau khi hiểu cách hoạt động và không có popstate, thay vào đó là statechange. Tôi đang tìm cách khác khi nút quay lại của trình duyệt đã được nhấn.

Lý do là tôi cần biết URL trước khi trạng thái di chuyển, từ trạng thái tôi sẽ chuyển đến. Với dự án gist, chỉ có URL chúng tôi truy cập mới được xem xét.

Tôi hy vọng giải pháp không phải là theo dõi URL mới nhất được truy cập trong biến toàn cầu.

Cảm ơn

Answer 1

Cuối cùng tôi quản lý tất cả các liên kết sử dụng History.pushState, như vậy không có nhu cầu khác nhau một nút quay lại ép. Chúng tôi xử lý tất cả các thay đổi trạng thái theo cùng một cách.

Chỉnh sửa: Tìm thấy hai vấn đề này trong Github của History.js, có thể giúp ai đó. https://github.com/browserstate/history.js/issues/70 https://github.com/browserstate/history.js/issues/47

Answer 2

Tôi biết đây là một câu hỏi khá ngày, nhưng tôi đã đưa ra một giải pháp cho các vấn đề với sự trở lại/nút về phía trước khi chuyển đổi giữa một trang tiêu chuẩn và một trang Lịch sử-state.

Kịch bản: Sử dụng Lịch sử HTML5 (hoặc plugin history.js) trên một tập hợp các trang Sau đó, các trang khác chúng tôi cần tải thực, còn gọi là trang chuẩn (không hỏi tại sao, nhưng có một số trường hợp sử dụng nhất định có thể cần thiết)

Khi bạn đi từ trang trạng thái Lịch sử và thực hiện tải thực lên trang chuẩn. Bạn không thể quay trở lại: nó thay đổi url, nhưng không tải trang - nó chỉ kích hoạt một statechange; mà tôi giả định là vấn đề của bài đăng gốc. Ý kiến ​​cá nhân của tôi là đây là lỗi trình duyệt (tất cả các trình duyệt đều có vấn đề), bởi vì trình duyệt nên biết trang bạn đang truy cập đã được tải lại bên ngoài trang Tiểu sử Lịch sử.

Tôi đã sửa lỗi này bằng một cái gì đó thực sự đơn giản: Lắng nghe sự kiện statechange và yêu cầu trình duyệt làm mới khi nó kích hoạt. Bằng cách này tôi không quan tâm nếu họ quay trở lại hoặc chuyển tiếp ra khỏi trang này. Nếu trình duyệt cho rằng trạng thái đang thay đổi (các liên kết không kích hoạt sự kiện statechange), chỉ quay lại/chuyển tiếp INTO trang trạng thái Lịch sử mới kích hoạt sự kiện này, vì vậy nó giải quyết được vấn đề.

Mã, sử dụng jQuery + History.js plugin:

$(window).on('statechange', function() { 
    window.location.reload(); 
}); 

Nếu điều này không có ý nghĩa, có lẽ bạn đang không có vấn đề này. Tuy nhiên, tôi đã nhận thấy điều này trên nhiều trang web mà làm sử dụng Lịch sử HTML 5 (thậm chí pinterest.com có ​​vấn đề này nếu bạn tải lại khi trên một phương thức hình ảnh và sau đó cố gắng quay lại).

Hy vọng rằng, nếu bạn có vấn đề này, bạn sẽ tìm thấy câu trả lời này và có một phào nhẹ nhõm :)

Answer 3

Tôi tìm thấy giải pháp trên github là một chút quá trớn cho các mục đích của tôi. Tôi đã tạo ra một bool luôn luôn đúng, ngoại trừ ngay trước khi tôi sử dụng History để thay đổi trạng thái.

var manualStateChange = true; 

History.Adapter.bind(window,'statechange',function(){ 
    if(manualStateChange == true){ 
    // BACK BUTTON WAS PRESSED 
    } 
    manualStateChange = true; 
}); 

Bất cứ lúc nào tôi thay đổi trạng thái lập trình, thiết lập các bool false:

manualStateChange = false; 
History.pushState(null, null, currentPath); 

Answer 4

Trong phiên bản 'chính thức' tính năng này không có sẵn. Hãy thử sử dụng tệp này trong thời gian chính: https://github.com/danger89/history.js/blob/master/scripts/bundled/html5/jquery.history.js

Tôi không thể đảm bảo rằng giải pháp của anh ấy hoạt động cho mọi trình duyệt. Nhưng đó là một giải pháp tốt đẹp. Nếu bạn áp dụng những thay đổi của mình, bạn có thể sử dụng:

var State = History.getState(); 
if (State.navigation) { 
    // Back/forward button is pressed. 
} 

Thông tin thêm có thể được tìm thấy trên Github issue 47.

Answer 5

Câu trả lời tương tự như câu trả lời của James Wagoner. sự kiện 'statechange' đã bị sa thải theo cả hai cách, vì vậy thay vào đó tôi chỉ kiểm tra sự kiện 'popstate', trong trường hợp của tôi chỉ được gọi khi người dùng quay lại.

window.addEventListener('popstate', function() { 
    window.location.reload(); 
});