HTML5 History API

[yxfanxiao]

HTML5 History API

2个方法

• history.pushState(stateObject, title, url)
• history.replaceState()

  1个事件

• window.onpopstate

---

history.pushState(stateObject, title, url)

url, 需要与当前页面url同源。

生成一条历史记录，方便用浏览器的“前进”、“后退”。

history.replaceState(stateObject, title, url)

与pushState基本相同，区别是不会新生成历史记录，而是将当前历史记录替换掉。

window.onpopstate

是与前面2个方法搭配使用的，只有通过前面2个方法设置了同一站点的多条历史记录，并在其之间导航（前进或后退），才会触发这个事件。同时，前面2个方法所设置的状态对象，也会在这个时候通过事件的event.state返还回来。

---

应用

$('input').on('click', function() {
    $.ajax({
        url: './json1.json'
    }).done(json => {
        history.pushState(null, '', 'http://localhost:8080/index.html?json=2');  
    });
});

模拟了一下最简单的实验。点击input，ajax载入后，url发生了变化，点击后退，回到之前的url。

$('input').on('click', function() {
    $.ajax({
        url: './json1.json'
    }).done(json => {
        history.replaceState(null, '', 'http://localhost:8080/index.html?json=2');  
    });
});

replaceState,则是把history中的 "http://localhost:8080/index.html" 替换成 "http://localhost:8080/index.html?json=2", 即回不去之前的页面了。

window.onpopstate = function (e) {
    console.log(e);
}

当后退时，即相当于调用history.back(),触发onpopstate,这时e.state返回的是回到的这个history url里的state。