HTML5 : History API

внешний интерфейс браузер

History API

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

методы и свойства window.history

метод:back() forward() go()
Атрибуты:length 
//返回
window.history.back()
window.history.go(-1)
//向前跳转
window.history.foward()
window.history.go(1)
//历史记录中页面总数
history.length

Новый подход HTML5: добавление и замена записей истории

pushState
history.pushState(state, title, url);Добавить запись истории, не обновляя страницу
параметр
state: объект состояния, связанный с указанным URL-адресом. При срабатывании события popstate объект будет передан в функцию обратного вызова. Если вам не нужен этот объект, вы можете указать здесь null.
title: заголовок новой страницы, но в настоящее время все браузеры игнорируют это значение, поэтому здесь можно указать null.
url: новый URL-адрес, который должен находиться в том же домене, что и предыдущая страница. Адресная строка вашего браузера отобразит этот URL.
Создайте 2 документа, demo.html и index.html, измените их заголовок на соответствующее имя и введите имя документа в теле в качестве документа тега содержимого.
//index.html
history.pushState(null, null,'./demo.html')
Браузер не обновляется для загрузки demo.html, просто измените адрес в адресной строке браузера
//index.html
history.pushState(null, null,'./demo.html')
history.pushState(null, null,'./inexistence.html')

не проверяет существование inexistence.html
Приложение -- добавьте хеш-значение, страница загружена только частично
//index.html
history.pushState(null, null,'#one')
replaceState
history.replaceState(state, title, url);Заменить текущую историю без обновления страницы
//demo.html
history.replaceState(null, null,'?one')
текущая историяhttp://localhost/class/demo.htmlзаменяется наhttp://localhost/class/demo.html?one

мероприятие

1.popstateСобытие: срабатывает при изменении записи истории, вызываетсяhistory.pushState()илиhistory.replaceState()событие popstate не запускается
2.hashchangeсобытие: когда страницаhashЗапускается при изменении значения, часто используется для создания одностраничных приложений.

заявление

Нажмите кнопку, соответствующее содержимое появится в области содержимого, и вы сможете вернуться на предыдущую страницу содержимого с помощью кнопки «Назад» в браузере.
HTML
<div class="wrapper">
    <div class="header">
        <!-- 设置data值标记每个地址 -->
        <button data="first">first</button>
        <button data="second">second</button>
        <button data="third">third</button>
    </div>
    <div class="content">
        <div class="item">first</div>
    </div>
</div>
JS
var item = document.getElementsByClassName('item')[0];
var header = document.getElementsByClassName('header')[0];
var page = '';
function init(){
    //替换页面的历史记录，并把{newPage : 'first'}传入这条历史记录下,方便后期popstate调用
    history.replaceState({newPage : 'first'}, null, '?first');
    ajax('GET','./getContent.php','page=first', doData, true)
}
init();
function doData(data){
    //将ajax获取的数据插入到item元素节点里面
    item.innerHTML = data;
}
header.addEventListener('click', function(e){
    
    page = e.target.getAttribute('data');
    history.pushState({newPage : page}, null, '?'+page);
    ajax('GET', './getContent.php','page='+page, doData, true);
})
//当页面前进与后退的时候，popstate监听历史记录变化，触发对应页面的ajax请求。
window.addEventListener('popstate', function(e){
    // console.log(e)
    var newPage = e.state.newPage;
    ajax('GET', './getContent.php','page='+newPage, doData, true);
})
php
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$page = $_GET['page'];
if($page == 'first'){
    $data = 'first third';
}else if($page == 'second'){
    $data = 'second third';
}else if($page == 'third'){
    $data = 'third third';
}

echo"{$data}";
Категории