HTML5 onpopstate khi tải trang

Question

Tôi đang sử dụng sự kiện HTML5 onpopstate mới. Sử dụng Firefox 4 sự kiện window.onpopstate được kích hoạt khi tải trang trong khi trong Webkit, điều này dường như không đúng.

Hành vi đúng là gì?

Answer 1

Sự kiện popstate được kích hoạt trong một số trường hợp nhất định khi điều hướng đến mục nhập lịch sử phiên.

http://www.whatwg.org/specs/web-apps/current-work/#event-popstate

Từ hiểu biết của tôi, mặc dù tôi có thể là sai, thấy như tải trang có ý nghĩa lịch sử được tạo ra và đi qua để, vâng, nó sẽ được kích hoạt trên tải trang.

Cũng xem,

http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19722.html

và

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Answer 2

Firing onpopstate trên tải trang là đúng, và WebKit sẽ có hành vi này sớm. WebKit 534.7 (Chrome 7.0517.44) hiện hoạt động theo cách này.

Tôi đã gửi lỗi Chrome trên đó, nhưng hóa ra đây là hành vi mong muốn; nó là cần thiết để xử lý một số hành động nút quay lại/chuyển tiếp một cách chính xác. Xem this bug report at code.google.com để biết thêm thảo luận và liên kết.

Tôi vẫn đang cố gắng đưa ra một mẫu mã tốt cho trình xử lý sự kiện onpopstate.

Answer 3

Tôi không biết nếu là những gì bạn đang yêu cầu này, nhưng giải pháp của tôi cho một ajax chỉ- xử lý sự kiện onpopstate là để thiết lập để true một biến refreshed trên window.onload và đặt nó vào false trên history.pushState cuộc gọi; sau đó, trên trình xử lý onpopstate, hãy thực hiện công cụ nếu refreshed là false.

Trông ngớ ngẩn, đúng vậy, nhưng tôi không thể làm tốt hơn.

Answer 4

Trình duyệt có xu hướng xử lý sự kiện popstate khác nhau khi tải trang. Chrome và Safari luôn phát ra sự kiện popstate khi tải trang, nhưng Firefox thì không.

quote này được lấy từ tài liệu của Mozilla: https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate

tôi có xu hướng đồng ý với các hệ thống Mozilla. Tải trang không phải là hành động yêu cầu sự kiện popstate phụ được kích hoạt, bởi vì trạng thái không bị xuất hiện, nó đang được tải lần đầu tiên.

Tôi đoán Webkit đang làm điều đó để thuận tiện ... trong tất cả các triển khai của tôi, nó luôn là một sự bất tiện để trì hoãn tải trình xử lý của tôi cho đến sau khi popstate ban đầu đã kích hoạt.

Thay vì điều này (sử dụng chức năng giả):

AddEventHandler(window, 'popstate', OnPopState); 

tôi phải làm một cái gì đó như thế này:

AddLoadEvent(window.setTimeout(function() 
    { 
     AddEventHandler(window, 'popstate', OnPopState); 
    },0)); 

Answer 5

Chỉ cần giải quyết vấn đề này, và việc sửa chữa thực sự là khá đơn giản. Firefox không kích hoạt onpopstate khi tải trang ban đầu. Sau khi bạn bắn một popstate, trả về false hoặc ngăn chặn mặc định trên hành động page.load, và bạn đang vàng.

Chúc mừng.

Trong hành động ở đây: www.thecoffeeshopnyc.com

// Write in a new handler for Firefox, which does not fire popstate on load. 
// Modern Webkit browsers fire popstate on load. The event handler below fires the controller 
$(window).load(function() { 
    if ($.browser.mozilla) { 
     // Your func. 
    } 
}) 

// Add the event listener. If the above is false, it will still run as intended in normal browsers. 
window.onpopstate = function() { 
    // Your func. 
} 

Answer 6

Trong trường hợp ai đó quan tâm, tôi đã đưa ra một mô hình khá để làm việc với onpopstate (mã này giả jQuery, kiểm tra phát hiện tính năng được tước để rõ ràng):

$(function() { 

    // 1. Add initial state to current history record on page load. 
    var href = location.href; 
    history.replaceState({"href": href}, null, href); 

    // 2. Now attach the popstate handler. 
    window.onpopstate = function(ev) { 

    // Raised on page load this event will still contain no state. 
    var state = ev.state; 
    if (state && state.href) { 

     // 3. Add your logic, use `state` and `state.href` as you see fit.   

    } 
    }; 

});