HTML5 onpopstate при загрузке страницы - PullRequest
10 голосов
/ 13 сентября 2010

Я использую новое событие HTML5 onpopstate.При использовании Firefox 4 событие window.onpopstate инициируется при загрузке страницы, тогда как в Webkit этого не происходит.

Какое поведение является правильным?

Ответы [ 6 ]

10 голосов
/ 13 сентября 2010

Событие popstate вызывается в определенных случаях при переходе к записи истории сеанса.

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

Насколько я понимаю, хотя я могу ошибаться, видя, что загрузка страницы означает, что история создается и перемещается к ней, да, она должна запускаться при загрузке страницы.

Также см.,

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

и

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

4 голосов
/ 15 ноября 2010

Правильное включение onpopstate при загрузке страницы, и вскоре WebKit будет иметь такое поведение. WebKit 534.7 (Chrome 7.0517.44) теперь ведет себя так.

Я подал ошибку Chrome, но оказалось, что это желаемое поведение; это необходимо для правильной обработки определенных действий кнопок «назад» и «вперед». См. этот отчет об ошибке на code.google.com для получения дополнительной информации и ссылок.

Я все еще пытаюсь найти хороший шаблон кода для обработчика событий onpopstate.

3 голосов
/ 12 декабря 2012

Только что решил эту проблему, и исправить это на самом деле довольно просто.Firefox не запускает onpopstate при начальной загрузке страницы.После того, как вы запустите popstate, вернете false или запретите действие по умолчанию в действии page.load, и вы получите золотую медаль.

// 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.
}
3 голосов
/ 05 августа 2012

Я не знаю, является ли это тем, о чем вы спрашиваете, но мое решение для обработчика события только для ajax *1002* onpopstate состоит в том, чтобы установить true переменную refreshed на window.onload и установите его на false на history.pushState вызовах; тогда на обработчике onpopstate просто делайте вещи, если refreshed равен false.

Выглядит глупо, и это так, но я не мог сделать ничего лучше.

1 голос
/ 01 февраля 2013

На случай, если кому-то интересно, я придумала приличный шаблон для работы с onpopstate (в этом коде предполагается jQuery, проверки на обнаружение функций убраны для ясности):

$(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.          

    }
  };

});
1 голос
/ 22 октября 2012

Браузеры, как правило, обрабатывают событие popstate по-разному при загрузке страницы. Chrome и Safari всегда выдают событие popstate при загрузке страницы, но Firefox нет.

Эта цитата была взята из документации Mozilla: https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate

Я склонен согласиться с системой Mozilla. Загрузка страницы не является действием, требующим запуска дополнительного события popstate, поскольку состояние не передается, оно загружается впервые.

Я предполагаю, что Webkit делает это для удобства ... во всех моих реализациях всегда неудобно откладывать загрузку моего обработчика до тех пор, пока не будет запущено исходное состояние.

Вместо этого (с использованием псевдо-функций):

AddEventHandler(window, 'popstate', OnPopState);

Я должен сделать что-то вроде этого:

AddLoadEvent(window.setTimeout(function() 
    { 
        AddEventHandler(window, 'popstate', OnPopState); 
    },0));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...