Давайте кратко поговорим об использовании pushState и replaceState в H5.

В HTML5 представлены методы History.pushState() и History.replaceState(), которые могут добавлять и изменять записи истории соответственно. Эти методы обычно используются вместе с window.onpopstate.

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

 var stateObj = { foo: bar };history.pushState(stateObj, страница 2, bar.html);

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

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

Если мы еще раз нажмем кнопку «Назад», URL-адрес страницы изменится на http://mozilla.org/foo.html, а объект документа document вызовет другое событие popstate. На этот раз объект состояния объекта события будет иметь значение null. То же самое и здесь: возврат не меняет содержимое документа. Хотя документ может изменить свое содержимое при получении события popstate, его содержимое все равно будет соответствовать предыдущему представлению.

pushState() принимает три параметра: объект состояния, заголовок (в настоящее время игнорируется) и (необязательно) URL-адрес. Давайте подробно объясним эти три параметра:

Объект состояния. Состояние объекта состояния — это объект JavaScript, который создает новые записи истории с помощью pushState(). Всякий раз, когда пользователь переходит в новое состояние, запускается событие popstate, а свойство состояния события содержит копию объекта состояния записи истории.

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

URL-адрес — этот параметр определяет новую запись исторического URL-адреса. Обратите внимание, что браузер не будет загружать этот URL-адрес сразу после вызова pushState(), но при определенных обстоятельствах он может загрузить этот URL-адрес позже, например, когда пользователь повторно открывает браузер. Новый URL-адрес не обязательно должен быть абсолютным путем. Если новый URL-адрес является относительным путем, он будет рассматриваться как относительный к текущему URL-адресу. Новый URL-адрес должен иметь то же происхождение, что и текущий URL-адрес, иначе pushState() выдаст исключение. Этот параметр является необязательным и по умолчанию соответствует текущему URL-адресу.

В некотором смысле вызов pushState() аналогичен настройке window.location = #foo: оба метода создают и активируют новую запись истории на текущей странице. Но pushState() имеет следующие преимущества:

Новым URL-адресом может быть любой URL-адрес, имеющий то же происхождение, что и текущий URL-адрес. А установка window.location сохраняет тот же файл только в том случае, если вы изменили только хэш-значение.

При желании запись истории можно создать без изменения URL-адреса. Установка window.location = #foo; создаст новую запись в истории, только если текущий хеш не #foo.

Мы можем связать произвольные данные с новыми элементами истории. При использовании метода на основе хэш-значения все соответствующие данные должны быть закодированы в короткую строку.

Использование History.replaceState() очень похоже на History.pushState(), разница в том, что replaceState() изменяет текущий элемент истории, а не создает новый.

Всякий раз, когда изменяется активная запись истории, событие popstate запускается для соответствующего объекта окна. Если текущая активная запись истории была создана методом History.pushState() или изменена методом History.replaceState(), свойство состояния объекта события popstate содержит копию объекта состояния этой записи истории.

Мы также можем получить состояние непосредственно в объекте истории следующим образом:

 вар currentState = History.state;

Следует отметить, что вызов History.pushState() или History.replaceState() не вызовет событие popstate. Событие opstate будет вызвано только при определенных действиях браузера, таких как нажатие кнопок «Назад» и «Вперед» (или вызов методов History.back(), History.forward() и History.go() в JavaScript).

Если текущий адрес веб-страницы — http://example.com/example.html, запустите следующий код:

 window.onpopstate = function(event) { alert(location: + document.location + , state: + JSON.stringify(event.state));};//Привязываем функцию обработки событий History.pushState({page: 1 } , title 1, ?page=1); //Добавляем и активируем запись истории http://example.com/example.html?page=1, индекс записи — 1history.pushState({page: 2}, title 2, ?page=2); //Добавляем и активируем запись истории http://example.com/example.html?page=2, индекс записи — 2history.replaceState({page: 3}, title 3, ? page=3); //Измените активную в данный момент запись истории http://ex..?page=2 на http://ex..?page=3, а индекс записи — 3history.back(); Местоположение всплывающего окна: http://example.com/example.html?page=1, состояние: {page:1}history.back() // Местоположение всплывающего окна: http://example.com/example.html, состояние: nullhistory.go(2); // Местоположение всплывающего окна: http://example.com/example.html?page=3, состояние: {page:3}

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

 <body> <div>window.onpopstate может отслеживать событие возврата ключа</div> <script> History.pushState({}, ); window.onpopstate = function(event) { //Здесь вы можете отслеживать событие возврата браузера и делайте то, что хотите, //Например: перейдите на другую веб-страницу location.href = https://www.baidu.com };

Конечно, вы также можете использовать window.onhashchange для отслеживания возвращаемого события в браузере. Обратитесь к следующему коду (можно запустить напрямую):

 <body> <div>window.onhashchange может отслеживать событие возврата ключа</div> <script> setTimeout(()=>{ location.hash=a },100); setTimeout(()=>{ window.onhashchange = функция (событие) { location.href = https://www.baidu.com } },200;

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.