History.pushState - не работает?

Ответ 1

такое поведение ожидается и соответствует спецификациям управления стеком истории.

Это довольно сложная проблема для объяснения. но вкратце думают об этом как о том: любая запись истории, которую пользователь нажимает на стек истории (используя pushState и т.д.), не заслуживает загрузки страницы, когда вы переходите от нее, потому что она считается ложной (сгенерированной пользователем) историей.

почему? это поведение является хорошей вещью и согласуется с намерением дать разработчику больше контроля над страницей, не будучи вынужденным перезагрузить его (подумайте об этом как ajax: вы можете делать то, что ранее было возможно только при перезагрузке страницы, например, при извлечении данных, но теперь вы можете сделать это без перезагрузки страницы с помощью объекта XMLHttpRequest). Если вы хотите воспроизвести поведение перезагрузки страницы при нажатии кнопки "Назад", вы можете просто вызовите location.reload(), когда вы обрабатываете событие window.onpopstate

как? это может выходить за рамки вашего вопроса, но я просто хотел рассказать о нем, чтобы описать, о чем мы говорим.

позвольте мне объяснить, используя существующий пример здесь (выделенный текст будет выделен курсивом):

Предположим, что http://mozilla.org/foo.html выполняет следующий JavaScript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Это приведет к тому, что панель URL отобразит http://mozilla.org/bar.html, но не заставит браузер загружать bar.html или даже проверять наличие bar.html.

думайте об этом как о том, что вы создаете запись в стеке истории, которая не связана с фактической загрузкой страницы. Скорее, это "поддельная" загрузка страницы (т.е. вы просто используете javascript для управления dom и вставляете html)..

Предположим теперь, что пользователь теперь переходит к http://google.com, затем щелкает обратно. На этом этапе строка URL отобразит http://mozilla.org/bar.html, и на странице появится всплывающее событие, объект состояния которого содержит копию stateObj. Сама страница будет выглядеть как foo.html, хотя страница может изменять ее содержимое во время события popstate.

точка здесь заключается в том, что bar.html - это поддельная запись истории, которая находится поверх оригинальной http://mozilla.org/foo.html.., поэтому вы увидите на url http://mozilla.org/bar.html, но содержимое будет принадлежать foo (в этом примере обратите внимание, что мы не манипулировали содержимым dom, когда мы нажали bar.html.. если бы нам понравилось в ваш пример.. тогда это содержимое также появится). ключевая вещь здесь в том, что страница перезагружает!.. потому что мы обслуживаем страницу, которая имеет запись genuin в стеке истории (даже если на url.. мы показываем URL-адрес, который связан с поддельной записью в стек истории).

также отделяет это обсуждение от страницы, вручную обрабатывая событие popstate.. это другая история и просто усложнит ситуацию.

Если мы снова щелкнем, URL-адрес изменится на http://mozilla.org/foo.html, и документ получит другое событие popstate, на этот раз с нулевым объектом состояния. Здесь также возвращение назад не изменяет содержимое документа из того, что было на предыдущем шаге, хотя документ может обновить его содержимое вручную после получения события popstate.

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

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

Ответ 2

window.onpopstate = function(event) {    
    if(event && event.state) {
        location.reload(); 
    }
}

Это то, что я использую:)