Statechange kích hoạt bất cứ khi nào tôi thực hiện trạng thái đẩy

Question

Tôi đang sử dụng history.js để xử lý nút quay lại. Trong stat.js của history.js được kích hoạt bất cứ khi nào tôi thực hiện pushstate. Tại sao? hành vi

Answer 1

Theo discussion on github này, nó mong đợi của history.js

này pull request tuyên bố đã biến đổi history.js là inline hơn với W3C Specs.

Answer 2

Muốn thêm, có, đây là hành vi mong đợi của History.js. Đồng thời có more discussions phê phán hành vi này vì nó không phải là tiêu chuẩn W3C và gây nhầm lẫn.

Tóm lại, để trả lời câu hỏi của bạn: Trong chức năng History.js pushState() là một cuộc gọi đến statechange ở cuối.

Upside của giải pháp này là bạn chỉ có thể thay đổi (đẩy) trạng thái mới của mình và để hàm onstatechange() xử lý việc chuyển đổi. Downside là bạn không thể xử lý các ngoại lệ/hoặc phải ghi chúng vào bộ xử lý sự kiện onstatechange.

Cá nhân tôi thích cách xử lý W3C này, vì bạn có thể phân biệt giữa nút quay lại/tiến và pushState. Các History.js bảo trì đang làm việc trên một giải pháp cờ nội bộ, cho phép bạn thay đổi hành vi này:

Thông báo như thế nào các cuộc gọi trên [pushstate-cuộc gọi] sự kiện kích hoạt statechange, nếu vì một lý do bạn không muốn điều này xảy ra thì bên trong handler statechange của bạn, bạn có thể sử dụng như sau:

if (History.getState().internal) { return; } 

* tính năng này hiện đang được phát triển và chỉ có thể được sử dụng với phiên bản 'dev' của History.js! Hy vọng điều này sẽ giúp một số người khác trong tương lai :)

Answer 3

Sau khi cố gắng thực hiện điều này cho một ngày bây giờ, cuối cùng tôi đã tìm thấy giải pháp ở đây: https://github.com/browserstate/history.js/issues/47#issuecomment-25750285

Mã này là khá đơn giản chết tiệt, sau đây được trích dẫn từ liên kết:

Khi bạn đẩy trạng thái của bạn

History.pushState({ 
    _index: History.getCurrentIndex(), 
    someData: ... 
}, someTitle, someUrl); 

và sau đó trong sự kiện ràng buộc

History.Adapter.bind(window, 'statechange', function() { 
    var currentIndex = History.getCurrentIndex(); 
    var internal = (History.getState().data._index == (currentIndex - 1)); 
    if (!internal) { 
     // your action 
    } 
});