html5新特性：pushState,onpopstate

最新推荐文章于 2022-08-30 21:58:47 发布

weixin_30492047

最新推荐文章于 2022-08-30 21:58:47 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/woshiyinmo/p/3348246.html

本文详细介绍了如何使用JavaScript创建一个简单的页面历史记录导航功能，包括如何在页面上添加按钮，实现页面间的跳转，并在浏览器地址栏显示当前页面的URL。通过`history.pushState`方法和`window.onpopstate`事件，可以实现在不刷新页面的情况下浏览历史页面。

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

详见demo代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<button id="btn">按钮</button>
<script>
    var btn=document.getElementById('btn');
    var ind=0;
    var obj={ind:ind};

    btn.onclick=function(){
        obj.ind++;
        //参数一：obj供以后onpopstate使用（重要）
        //参数二:暂无其他意义
        //参数三：浏览器地址栏历史地址（重要）
        history.pushState(obj,'ind','ind'+obj.ind);
    }

    window.onpopstate=function(ev){
        //ev.state为pushState时传入的obj参数
        if(ev.state){
            document.title=ev.state.ind
        }
    }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/woshiyinmo/p/3348246.html