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
: 一個於指定網址相關的狀態物件,popstate事件觸發時,該物件會傳入回撥函式中。如果不需要這個物件,此處可以填null。title
: 新頁面的標題,但是所有瀏覽器目前都忽略這個值,因此這裡可以填null。url
: 新的網址,必須與前頁面處在同一個域。瀏覽器的位址列將顯示這個網址。
建立2個文件,demo.html和index.html,更改它們的title為對應的名字,並在body裡輸入文件名字作為內容標記文件。
//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是否存在
應用--新增hash值,頁面只區域性載入
//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
值改變的時候觸發,常用於構建單頁面應用。
應用
點選botton,content區出現對應的內容,通過瀏覽器返回按鈕可以返回上一個內容頁面。
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' , do Data, true )
}
init();
function do Data(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, do Data, true );
})
//當頁面前進與後退的時候,popstate監聽歷史記錄變化,觸發對應頁面的ajax請求。
window.addEventListener('popstate' , function (e){
// console.log(e)
var newPage = e.state.newPage;
ajax('GET' , './getContent.php' ,'page=' +newPage, do Data, 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 }" ;
複製程式碼