3.html5历史管理 (history.pushState)

最新推荐文章于 2019-03-14 22:25:04 发布

YuhNagi

最新推荐文章于 2019-03-14 22:25:04 发布

阅读量718

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： hash history

本文链接：https://blog.youkuaiyun.com/YuhNagi/article/details/52985979

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML5中History API的使用方法，包括通过监听hash值变化和使用pushState实现无刷新页面切换的技术细节。同时提供了示例代码帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想应该是比较笨的一类，一个history捣鼓了一个下午才勉强算是弄懂了点….
产生方法：1.监视hash值的改变 2.利用pushState开发无刷页面切换

hash值的改变

<!-- 例1 hash值改变事件 -->
 <script>
window.onload = function(){

    var oBtn = document.getElementById('btn');
    var oP = document.getElementById('p1');

    var json= {};
    oBtn.onclick = function(){
        var number = randomNum(35,7);
        oP.innerHTML = number;
        var attr = Math.random();
// 给json添加值和属性，与页面内容形成映射关系
        json[attr] = number;
        window.location.hash = attr;
    }

    function randomNum(iAll,iNow){
        var arr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }
// 用来存取随机选出来的7个数
        var arr1 = [];
        for(var i=0;i<iNow;i++){
            var num = Math.floor( Math.random()*arr.length );
            arr1.push( arr.splice(num,1) );
        }
        return arr1;
    }

// 产生历史管理，在前进后退时内容也能够改变
    window.onhashchange = function(){
        //去掉#号，从第1位开始提取
        var number = json[window.location.hash.substring(1)];
        oP.innerHTML = number;
    }       

};

</script>
</head>

<body>
<button id="btn" type="button">按钮</button>
<p id="p1"></p>
</body>
<!-- hash值改变事件结束  -->

history.pushState实现无刷新页面切换

先把用到的东西整理下：

history.state

当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null，若改变后则就是pushState里的第一个参数的值了。

history.pushState(state, title, url)

将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。
三个参数：
state: 要跳转到的页面的状态、内容信息
title: 页面的标题，目前还没有浏览器实现，可传个空值
url: 要跳转到的URL地址，也可以不传。但不能跨域

history.replaceState(state, title, url)

用新的state和URL替换当前。不会造成页面刷新。
参数同pushState一样

window.onpopstate

在用户点了“前进”或“后退”按钮时触发，
通过ev.state获取在pushState里存取的信息对象替换当前的URL和history.state。

关于这几个API的介绍，也有比较详细的文章，附上链接：
history.pushState实现无刷新页面切换
http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html
-我觉得这篇文章的实现思路特别适合我这种小白看。

HTML5 history新特性pushState、replaceState
http://www.cnblogs.com/xcsn/p/4517581.html

还是用上面同样的例子：

<!-- history.pushState实现无刷新页面切换 -->
<script>
window.onload = function(){
    var oBtn = document.getElementById('btn');
    var oP = document.getElementById('p1');

    console.log(history.state); //null

    var stateObj = {"url":"测试history.state"};
    oBtn.onclick = function(){
        var number = randomNum(35,7);
        oP.innerHTML = number;

        history.pushState(stateObj.url,'',"5.eg历史管理.html");
        console.log(history.state); //测试history.state
    }

    window.onpopstate = function(ev){
        oP.innerHTML = ev.state;
        // console.log( typeof JSON.stringify(ev.state) );
    }

    function randomNum(iAll,iNow){
        var arr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }
// 用来存取随机选出来的7个数
        var arr1 = [];
        for(var i=0;i<iNow;i++){
            var num = Math.floor( Math.random()*arr.length );
            arr1.push( arr.splice(num,1) );
        }
        return arr1;
    }
};

</script>
</head>
<body>
<button id="btn" type="button">按钮</button>
<p id="p1"></p>
</body>
<!-- history.pushState实现无刷新页面切换结束 -->