h5 history api实现无刷新前进后退

操纵浏览器的历史记录

  1. history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址。

  2. history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上。

  3. history.state:获取历史栈中最顶端的state数据(即history.pushState中的第一个参数),不同浏览器的读写权限不一样。

  4. popstate事件:当用户单击浏览器的后退或者前进按钮(或者调用history.go,history.back,history.forward方法也会触发popstate事件。调用history.pushState()或者history.replaceState()不会触发popstate事件,但改变url中的hash值会触发popstate事件)时触发该事件。在事件处理函数中读取触发事件的事件对象的state属性值,该属性值即为执行pushState方法时所使用的第一个参数值,该state与history.state是相同的,而不是历史栈中被抛出的state对象。
    到目前为止,IE10,firefox4以上的版本,Chrome8以上的版本,Safari5,Opera11以上的版本浏览器支持HTML5中的History API。

判断是否支持h5 history api:
if (‘pushState’ in history) { … };

一个小例子:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<a href="12.html?color=green">greena><br/>
<a href="12.html?color=yellow">yellowa><br/>
<a href="12.html?color=blue">bluea>
<div style="height: 100px;">div>
<script>
    history.replaceState({
        color: 'red'
    }, '红色',"?color=red");//设置初始记录

    setBackgroundColor("red"); 

    window.onpopstate = function (event) {
        setBackgroundColor(event.state.color);
    };//url改变触发onpopstate事件

    var aArr = document.getElementsByTagName('a');
    for(var i = 0, num = aArr.length; i < num; i++){
        aArr[i].onclick = (function (i) {
            return function (event) {
                var query = this.href.split("?")[1];
                var color = query.split("=")[1];
                event.preventDefault();
                if (history.state.color !== color) {
                setBackgroundColor(color);
                history.pushState({
                        color: color
                    }, color ,location.href.split("?")[0] + "?" + query);   
                }
            }
        })(i)
    }
    function setBackgroundColor(color) {
        document.getElementsByTagName('div')[0].style.backgroundColor = color;
    }

script>
body>
html>

你可能感兴趣的:(JavaScript,h5,web前端)