抽空研究了下这两个新方法，确实可以解决很多问题

1、使用pushState()方法 可以控制浏览器自带的返回按钮:

有时候我们想让用户点击浏览器返回按钮时，不返回，或执行其他操作，这时，就用到history.pushState()方法

讲解：

history.pushState(data,title,url) //每执行一次都会增加一条历史记录，浏览器在返回时，就不会返回前一个页面了，

data：要设置的history.state的值，可以是任意类型的值，可根据此值进行判断执行想要的操作。

title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替。

url：地址栏的值，若不需要可用空来代替。

// 监听浏览器的前进后退事件：

     window.addEventListener("popstate", function() {

        // 取出 设置好的 history.state 值，做判断

     });

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        <button class="btn" onclick="btnFun();">点击新增一条历史记录</button>

    </div>

    <script>

        console.log('增加历史记录前 state的值：',history.state); // null

function btnFun() {//点击事件

// 增加一个历史记录

history.pushState('a',null,'2.html?b=1');

            console.log('增加历史记录后 state的值：',history.state); // a

};

        window.addEventListener('popstate',function() {

            var state = history.state;//取出state值

//注意：在此处时（点击后退按钮时），state的值已经为null

            // （因为返回时历史记录会被删除，浏览器动作）

console.log('点击后退按钮后 state的值：',state); // null

            //判断，想要执行的操作

});

    </script>

</body>

</html>

2、history.replaceState() 与pushState()功能类似，除了这点：

replaceState()是用来修改当前的历史记录(history实体)，而不是创建一个新的历史记录，所以，当执行完history.replaceState()后，点击返回按钮照样会返回上一个一面。  当需要更新一个state对象或者当前history实体时，可以用replaceState()来实现。

用法：当在a页面使用replaceState()修改了历史记录后，跳转到b页面，后退到a页面时，历史记录就是修改过的。

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        <button class="btn" onclick="btnFun();">点击修改本页历史记录</button>

    </div>

    <br/>

    <div>

        <a href="b.html">点击跳转到b页面</a>

    </div>

    <script>

        function btnFun() {//点击事件

history.replaceState('a',null,'a.html?a=1');

            console.log('修改历史记录后 state的值：',history.state); // a

};

    </script>

</body>

</html>

点击跳转到b页面后 ，执行返回操作

回到a页面，url中?a=1还存在，我们可以利用这个参数在页面中执行一些操作，比如列表的选中

可以将系统的api二次封闭提高易用性

HTML5 history.pushState()和history.replaceState()新增、修改历史记录用法介绍的更多相关文章

  1. 不刷新网页修改url链接：history.pushState()和history.replaceState()新增、修改历史记录用法介绍

    最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,考虑到可以通过history.pushState()解决.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使用方法前首先需要了解它 ...

  2. Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录

    根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...

  3. history.pushState()和history.replaceState()

    Html5 新增history对象的两个方法:history.pushState()和history.replaceState(),方法执行后,浏览器地址栏会变成你传的url,而页面并不会重新载入或跳 ...

  4. ajax与HTML5 history pushState/replaceState实例

    一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...

  5. js pjax 和window.history.pushState,replaceState

    原文:http://blog.linjunhalida.com/blog/pjax/ github:https://github.com/defunkt/jquery-pjax 什么是pjax? 现在 ...

  6. HTML5学习笔记之History API

    这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...

  7. 通过history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  8. history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  9. 使用ajax和history.pushState无刷新改变页面URL

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

随机推荐

  1. open file /var/mobile/Media/DCIM 相册中获取到的视频地址使用 报错 视频文件不存在

    从相册中获取到的视频地址 例如  file:///var/mobile/Media/DCIM/100APPLE/IMG_9876.MOV 后面再使用的时候报错 视频文件不存在  那是因为在ios10. ...

  2. Django models文件模型变更注意事项（表结构的修改）

    表结构的修改 1.表结构修改后,原来表中已存在的数据,就会出现结构混乱,makemigrations更新表的时候就会出错 比如第一次建模型,漏了一个字段,后来补上了.(经常遇到模型字段修改) 重新ma ...

  3. OpenGL编程指南（第九版） Tiangles 学习笔记

    ////////////////////////////////////////////////////////////////////////////// // // Triangles.cpp / ...

  4. js简单实现自动轮播

    //简单一个布局存放图片 <div class="lb"> <div class="lbt"> <img src="im ...

  5. Bootstrap-datepicker3官方文档中文翻译---Keyboard support/键盘支持（原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html）

    本日期控件包含了键盘导航.  “focused date” 在键盘导航期间一直会被保持追踪并且高亮显示(就想鼠标悬停的时候一样),当一个日期被切换(译者注:选中状态的切换)时或者控件隐藏时清除. up ...

  6. laravel 运行错误

    全局相关 1 2 3 4 5 6 7 8 9 10 11 12 13 14 php artisan:显示详细的命令行帮助信息,同 php artisan list php artisan –help: ...

  7. OpenCV-Python：车道检测

    任务: 一共要完成两项任务: 1. 在所提供的公路图片上检测出车道线并标记 2. 在所提供的公路视频上检测出车道线并标记 方案: 要检测出当前车道,就是要检测出左右两条车道直线.由于无人车一直保持在当 ...

  8. podman(libpod)---github简单记录

    这个应该集成了Skopeo 和Buildah. 用于代替docker的工具包,且和cri-o共享后端代码,迟早集成进K8S~~~. (docker肿么办????) github地址: https:// ...

  9. Build 2019 彩蛋

    N久没写过博客了… 最近在玩 APEX 但是手残党表示打到15级了,至今杀敌 4 人… 当快递员是越来越顺手了… 今年巨硬的 Build 大会会在 5 月 6-8 号召开 新发布的 Hololens ...

  10. RabbitMQ通过Exchange.fanout、不同的队列绑定同一个Exchange实现多播处理

    消费者1: static void Main(string[] args) { ConnectionFactory factory = new ConnectionFactory() { HostNa ...