HTML5 history.pushState()和history.replaceState()新增、修改历史记录用法介绍
抽空研究了下这两个新方法,确实可以解决很多问题
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()新增、修改历史记录用法介绍的更多相关文章
- 不刷新网页修改url链接:history.pushState()和history.replaceState()新增、修改历史记录用法介绍
最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,考虑到可以通过history.pushState()解决.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使用方法前首先需要了解它 ...
- Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...
- history.pushState()和history.replaceState()
Html5 新增history对象的两个方法:history.pushState()和history.replaceState(),方法执行后,浏览器地址栏会变成你传的url,而页面并不会重新载入或跳 ...
- ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
- js pjax 和window.history.pushState,replaceState
原文:http://blog.linjunhalida.com/blog/pjax/ github:https://github.com/defunkt/jquery-pjax 什么是pjax? 现在 ...
- HTML5学习笔记之History API
这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...
- 通过history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- 使用ajax和history.pushState无刷新改变页面URL
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
随机推荐
- xgb
xgb原理 xgb代码
- Angular 任务列表页
新建一个任务Module $ ng g m task 功能:项目列表显示,增加,修改,删除项目.邀请其它人员加入项目. 单一性原则:希望搭建多个组件,每个组件负责自己的功能. 一.task相关组件 $ ...
- SSM框架:解决后台传数据到前台中文乱码问题,使用@ResponseBody返回json 中文乱码
解决方法一:@RequestMapping(value="/getphone",produces = "text/plain;charset=utf-8") / ...
- 【运维】在Windows上使用IIS方向代理配置Websocket
最近在做小程序的项目,微信要求所有数据请求通道都要走https或wss.而我们的项目建设如下: api基于C#的MVC webapi开发. websocket基于Nodejs的thinkjs框架开发. ...
- tensorflow RNN循环神经网络 (分类例子)-【老鱼学tensorflow】
之前我们学习过用CNN(卷积神经网络)来识别手写字,在CNN中是把图片看成了二维矩阵,然后在二维矩阵中堆叠高度值来进行识别. 而在RNN中增添了时间的维度,因为我们会发现有些图片或者语言或语音等会在时 ...
- haproxy代理配置段参数设定
代理配置段:有四个配置段 default:设定默认参数, frontenf:前端服务器的设定 backend:后端服务器的设定 listening:是设定前端和后端一一对应的设定 参数: 1bind: ...
- UOJ#449. 【集训队作业2018】喂鸽子 min-max容斥,FFT
原文链接www.cnblogs.com/zhouzhendong/p/UOJ449.html 题解 设 f(i) 表示给 i 只鸽子喂食使得至少一只鸽子被喂饱的期望次数,先 min-max容斥 一下. ...
- 关于db2处理特殊字段出现异常java.io.charConversionException
记录一下以前遇到的问题 在使用db2数据库处理数据的时候,碰到特殊字段,出现的问题 java.io.charConversionException 官方解决方法: db2.jcc.charsetDec ...
- python3安装lxmlpipinstall安装失败解决办法
最近在学习python爬虫技术,lxml模块拥有很强大的获取元素功能,但是安装时总超时报错,如下解决办法 选择好python版本→注意pip版本→下载对应lxml.whl→键入对应的字符串→bingo ...
- Objective-C代码简写
NSNumber 所有的[NSNumber numberWith…:]方法都可以简写了: [NSNumber numberWithChar:‘X’] 简写为 @‘X’; [NSNumber num ...