HTML5 : History API

柒號發表於2018-05-07
原文網址 : https://juejin.im/post/5aebc4a26fb9a07acc11924d
HTMLAPI

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')
複製程式碼
HTML5 : History API
瀏覽器沒有重新整理載入demo.html，只是更改瀏覽器位址列地址
//index.html
history.pushState(null, null,'./demo.html')
history.pushState(null, null,'./inexistence.html')
複製程式碼

HTML5 : History API

不會檢查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', 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}";
複製程式碼

相關文章