Кратко поговорим о pushState и replaceState H5

JavaScript HTML

Я никогда не был знаком с историейpushStateа такжеreplaceStateМетод, найдите время, чтобы узнать сегодня, большая часть этой статьи перепечатана MDNManipulating the browser historyтак же какwindow.onpopstateЗаинтересованные студенты могут обращаться непосредственно к этим статьям.

1. Введение

Представлен HTML5history.pushState()а такжеhistory.replaceState()методы, которые могут добавлять и изменять записи истории соответственно. Эти методы обычноwindow.onpopstateС использованием.

2. Пример метода pushState()

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

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 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Документ объекта документа запускает другойpopstateСобытие, на этот раз объект состояния объекта события имеет значение null. Здесь также возврат не меняет содержание документа, хотя документ принимаетсяpopstateОна может изменить свое содержание во время мероприятия, и ее содержание остается таким же, как и у предыдущей презентации.

Три, метод pushState()

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

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

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

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

В-четвертых, разница между методом pushState() и установкой хеш-значения

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

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

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

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

Пять, метод replaceState()

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

Шесть, поп-событие

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

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

var currentState = history.state;

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

7. Примеры событий popstate

Если текущий веб-адрес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,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

Восемь, цель pushState()

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

<body>
    <div>window.onpopstate可以监听到返回键事件</div>
    <script>
        history.pushState({}, ""); 
        window.onpopstate = function(event) {
            //这里可以监听到浏览器的返回事件，并做你想做的事情，
            //例如：跳转到另一个网页
            location.href = "https://www.baidu.com";
        };
    </script>
</body>

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

<body>
    <div>window.onhashchange可以监听到返回键事件</div>
    <script>
        setTimeout(()=>{
            location.hash="a"
        },100);
        setTimeout(()=>{
            window.onhashchange = function(event) {
                location.href = "https://www.baidu.com";
            }
        },200);
    </script>
</body>

9. Справочные статьи

'pushState', 'replaceState' Документация MDN(китайская версия перевода)

'onpopstate' Документация MDN(китайская версия перевода)

Первоначально опубликовано вЛичный сайт Ван Юлюэ

Категории