HTML5 History API реализует прыжок без обновления

Однажды, когда я был на **. Com, я обнаружил, что анимационный эффект входа и регистрации был очень великолепным, но то, что меня шокировало, так это то, что страница на самом деле не могла достичь обновления. Я рассмотрел знания, которые я узнал, и, казалось, не было никакой технологии для достижения этого. Поэтому я искал на Baidu и обнаружил, что это было первоначально достигнуто с использованием API истории в HTML5.

Однажды, когда я был на **. Com, я обнаружил, что анимационные эффекты входа и регистрации были очень великолепны, но то, что меня шокировало, так это то, что страница могла на самом деле добиться обновленных прыжков (пересмотрено, вы можете поразить это место, наблюдая за этим эффектом: Github или FM). Я рассмотрел знания, которые я узнал, и, казалось, не было никаких технологий, которые могли бы достичь этого. Поэтому я узнал, что это было первоначально достигнуто с использованием истории API истории в HTML5, но это никогда не пригодилось. Эта технология не была применена до тех пор, пока блог не был пересмотрен.

1. Добавлено функцию добавления элементов в историю браузеров через JS.

2. Отображение URL -адрес в измененной адресной панели браузера без обновления страницы.

3. Добавлено событие, которое стреляет, когда пользователь нажимает кнопку Back Brouwser.

Через приведенные выше три точки можно динамически изменить URL -адрес в адресной панели браузера, не обновляя страницу и динамически отобразить содержимое страницы.

Например: когда содержимое страницы A и страницы B отличается, перед HTML5, если вы переключаетесь со страницы A на страницу B, вам необходимо переключиться со страницы A на страницу B в браузере или, если вам нужна функция кнопки обратной кнопки, вы можете добавить #xxxx к адресу URL, чтобы реализовать функцию обратной. Теперь в HTML5 вы можете реализовать следующую обработку через API истории:

1. Запросить данные B на странице A, отправив запрос AJAX.

2. Загрузите соответствующую информацию через JS на странице A в соответствующее место.

3. Переключитесь с адреса URL -адреса страницы A на адрес URL -адреса страницы B в адресной строке браузера через API истории без обновления страницы.

1. Различите количество терминов в истории. История, которой может управлять JavaScript, ограничена диапазоном, которого можно достичь с использованием ключей Back и Back в браузере. Это свойство возвращает сумму количества адресов, содержащиеся в соответствии с двумя кнопками вперед и назад.

1. назад () назад, что эквивалентно нажатию клавиши задней.

2.

3. go () Использование: ИСТОРИЯ.go (x); Перейдите по указанному адресу в рамках истории. Если x <0, то обратно x адреса, если x> 0, то пересаите адреса x, если x == 0, то обновите страницу, которая теперь открыта. ИСТОРИЯ.go (0) эквивалентна местоположению. Reload ().

1. story.pushstate (данные, заголовок [, url]): добавьте запись в верхнюю часть стека истории; Данные будут переданы как параметр, когда запускается событие OnPopstate; Название - это заголовок страницы, и все текущие браузеры будут игнорировать этот параметр; URL - это адрес страницы, необязательный, а по умолчанию - текущий адрес страницы.

2. stirory.replacestate (данные, заголовок [, url]): изменить текущую историю, параметры такие же, как и выше.

3. ИСТОРИЯ.STATE: используется для хранения данных данных о вышеуказанных методах. Разрешения на чтение и запись различных браузеров разные.

4. Событие POPSTATE: это событие запускается, когда пользователь нажимает кнопку Back или Forward в браузере. Значение свойства государственного свойства объекта события, которое запускает событие, читается в функции обработки событий. Это значение свойства является первым значением параметра, используемом при выполнении метода PushState, который сохраняет объект, который добавляется в синхронную историю браузера.

До сих пор браузер поддерживает исторический API в HTML5 по IE10, Firefox4 или выше, хром 8 или выше, Safari5 или выше.