Эта функция была кратко описана ранее. На этот раз мы подробно объясним принципы и существующие проблемы (поскольку он использует новый API HTML5, существуют проблемы совместимости, поэтому рекомендуется использовать мобильный терминал этого метода).
Описание функции:
Создайте новую вкладку в браузере и укажите URL. После того, как веб -страница загружена, кликам не разрешается возвращать в соответствии с обычным процессом. Поскольку не существует соответствующей истории текущей страницы вкладки, записи не могут быть возвращены.
В ответ на запрос клиента, в данном случае, добавьте ссылку (например, домашнюю страницу) в свою историю, так что на недавно открытой странице нажмите, чтобы вернуться, вы можете перейти на домашнюю страницу, позволяя пользователям видеть различные функции системы и продвигать платформу.
1. Ключевые моменты знаний
Html5 представляет метод ystory.pushstate () () и историю. Эти методы могут работать вместе с событием Window.onpopstate.
Случай:
Предположим, что http://mozilla.org/foo.html выполнит следующий код JavaScript:
Кода кода выглядит следующим образом: var stateObj = {foo: "bar"}; ИСТОРИЯ.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, на этот раз объект состояния является нулевым. Запада также не изменит содержание документа.
PushState () Метод
PushState () имеет три параметра: объект состояния, заголовок (который будет игнорироваться сейчас) и дополнительный адрес URL. Давайте рассмотрим детали этих трех параметров отдельно:
Объект состояния - объект JavaScript, связанный с новой историей, созданной с помощью метода pushState (). Всякий раз, когда пользователь перемещается в недавно созданное состояние, событие Popstate запускается, а свойство штата объекта события содержит копию объекта состояния в истории истории.
Любой сериализуемый объект может рассматриваться как объект состояния. Поскольку браузер Firefox сохраняет объекты состояния на жесткий диск пользователя, чтобы его можно было восстановить после того, как пользователь перезагружает браузер, мы насильственно ограничиваем размер объектов состояния 640K. Если вы передаете объект состояния, превышающий этот предел методу pushState (), метод будет выбросить исключение. Если вам нужно хранить большие объемы данных, рекомендуется использовать SessionStorage или LocalStorage.
Название - браузер Firefox в настоящее время игнорирует этот параметр, хотя он может использоваться в будущем. Учитывая, что этот метод может быть изменен в будущем, будет безопаснее пройти пустую строку. В качестве альтернативы, вы также можете пройти короткий заголовок, указывающий на статус, который вы собираетесь ввести.
Адрес (URL) - адрес новой истории истории. Браузер не загружает адрес после вызова метода pushState (), но после этого он может попытаться загрузить, например, пользователь перезапускает браузер. Новый URL не обязательно является абсолютным путем; Если это относительный путь, он будет основан на текущем URL; Продолжительный URL должен быть таким же, как текущий URL, в противном случае, pushState () выставит исключение. Этот параметр необязательно; Если не указано, это текущий URL -адрес документа.
Примечание. В Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / Seamonkey 2.1) до Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / Seamonkey 2.2), пройденные объекты сериализуются с использованием JSON. Начиная с Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / Seamonkey 2.3), объекты сериализируются с использованием алгоритма структурированного копирования. Это позволит безопасно передавать больше типов объектов.
В некотором смысле, вызов pushState () немного похож на установку window.location = '#foo', и все они создают и активируют новые записи истории в текущем документе. Но pushstate () имеет свои преимущества:
1. Новый URL может быть гомологичным URL. Напротив, при использовании метода Window.Location только изменение хэша может гарантировать, что он остается в том же документе.
2. Решите, изменить ли URL в соответствии с вашими личными потребностями. Вместо этого установите window.location = '#foo' 'и создайте новую историю, только если текущее значение хэш не является foo.
3. Вы можете добавить абстрактные данные к новой истории истории. Если вы используете метод на основе хэша, вы можете транскод только соответствующие данные в очень короткую строку.
Обратите внимание, что метод pushState () никогда не запустит событие хэш -оболочки, даже если новый адрес изменяет только хэш.
Событие Popstate
Событие Popstate запускается всякий раз, когда меняется активированная история. Если запись активированной истории создается PushState или затронут методом Replacestate, атрибут состояния события Popstate будет содержать копию объекта статуса истории.
Метод ReplaceState ()
Операция History.Replacestate () аналогична history.pushstate (), за исключением того, что метод Replacestate () будет изменять текущую запись истории вместо создания новой записи.
Если вы хотите обновить объект статуса или URL -адрес текущей записи истории в ответ на определенные действия пользователем, с помощью метода Replacestate () особенно подходит.
2. Идеи реализации
1. Используйте событие Popstate, чтобы прослушать событие Click and Return.
2. Когда событие запускается, определите, есть ли страница, чтобы вернуть историю текущей страницы.
3. Если нет страницы, которая может быть возвращена, вставлено две записи:
1) Указанная страница прыжка.
2) Пустая запись. (Сделайте текущую страницу не измениться)
Метод реализации
// Вернуться на домашнюю страницу без страницы перед возвращением функции pushistory () {if (inistory.length <2) {var vate = {title: "index", url: gethttpprefix + "index.html"}; window.history.pushstate (состояние, "index", location.href); state = {title: "index", url: ""}; window.history.pushstate (State, "index", ""); } //lll("history.state " + vistory.state) //console.log(history.state)}Определите количество записей в текущей истории. Поскольку браузер автоматически нажимает запись при загрузке страницы. Таким образом, нам нужно определить, составляет ли длина меньше 2.
Объект состояния, в котором можно получить соответствующую ссылку на URL.
Примечание:
Я положил URL -адрес в государственном объекте для первого Pushstate, чтобы облегчить работу прыжка. Второй параметр не имеет практического значения, потому что текущий браузер в основном не применяет этот параметр.
Третий параметр заменит ссылку в текущей адресной строке, но страница не будет прыгать. (Я допустил ошибку раньше, установив третий параметр для ссылки на домашнюю страницу, из -за которой адресная строка была изменена на ссылку на домашнюю страницу, чтобы ссылки на текущей странице были перенаправлены на основе домашней страницы, что приводит к ошибке всех ссылок на странице.
setTimeout (function () {pushistory () window.addeventListener ("popstate", function (e) {lll ("popstate"+window.history.state) if (window.history.state! = null && window.history.state.url! = "") {location.href = window.history.state.URL!Этот код помещается в готовое событие страницы, с задержкой в 300 миллисекунд, чтобы отставать от операции и предотвратить конфликты с событием System Pop.
Чтобы определить, имеет ли история объект состояния, только записи, которые соответствуют нашим требованиям, будут добавлены объект состояния, поэтому операция прыжка страницы может быть выполнена на основе этой точки.
Это достигнет того эффекта, который мы хотим.
4. Напишите в конце
недостаток:
1. Очевидно, как упоминалось в начале. Подходит только для браузеров, которые поддерживают HTML5.
2. Поскольку было вставлено две записи, возвращение мобильных терминалов, таких как WeChat, требуется два клика, чтобы вернуть, прежде чем запустить страницу и возвращение в окно чата WeChat, которое имеет плохой опыт пользователя.
Суммировать:
Этот метод определенно может быть оптимизирован и улучшен, но моей силы недостаточно, чтобы быть усовершенствованным до уровня совершенства.
Я надеюсь, что друзья, которые читают эту статью, могут получить некоторое вдохновение, или есть лучшие способы ее достижения.