HTML5历史状态管理history API-pushState/replaceState与popstate事件
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( ‘ω’ )و
【本文源址:http://blog.csdn.net/q1056843325/article/details/60607402 转载请添加该地址】
AJAX技术对我们前端产生了巨大影响
可以让我们的页面无刷新操作减少网络请求
但是它也产生了一些问题
不能够使用浏览器的前进与后退
(后退是浏览器非常常用的按钮)
很久很久以前,Gmail借助iframe解决了这个问题
但现在,HTML5提供了超级简单的API
#pushState与onpopstate
history.pushState(stateObject, title, url)
包含三个参数
分别是状态对象、新状态标题和可选参数相对URL
第一个参数状态对象应该传入提供页面状态信息的数据
第二个参数还没有浏览器实现
添加也没有什么用,所以可以传入一个空字符串
如果使用了第三个参数,那么执行这个函数后,浏览器地址也会更新
但是不会真的向服务器发送请求
当我们从状态栈中的一个状态跳到另一个状态popstate事件就会触发
(浏览器前后翻页触发,刷新页面不触发)
它的事件对象中有一个state属性存储着当初传递给pushState()的状态对象
下面通过一个小例子来解释一下
<button id="next">下一页</button>
当前页数:<span id="cur">0</span>
要实现点击下一页,然后当前页数对应增加
var next = document.getElementById('next');
var cur = document.getElementById('cur');
var page = 0; //表示当前页数
next.onclick = function(){page++;cur.innerHTML = page;
}
这时我们还不能使用浏览器的上下翻页
现在使用history API来添加一些代码
var next = document.getElementById('next');
var cur = document.getElementById('cur');
var page = 0;
next.onclick = function(){page++;history.pushState({page: page}, '','?page=' + page);//状态对象中存储当前页数cur.innerHTML = page;
}
window.onpopstate = function(e){if(e.state){cur.innerHTML = e.state.page;}else{cur.innerHTML = 0;}
}
当点击“后退”按钮回到最开始时(第0页)
因为没有状态,所以e.state值为null
#replaceState
除此之外还有一个API用于更新状态
参数与pushState()前两个参数相同
调用这个方法就会重写当前的状态
也就是说替换当前的记录
<button id="next">下一页</button>
<button id="update">更新样式</button>
当前页数:<span id="cur">0</span>
var next = document.getElementById('next');
var update = document.getElementById('update');
var cur = document.getElementById('cur');
var page = 0;
next.onclick = function(){page++;history.pushState({page: page}, '','?page=' + page);cur.innerHTML = page;
}
update.onclick = function(){history.replaceState({page: history.state.page + '(已读)'},'');//部分浏览器实现了history.state返回当前状态
}
window.onpopstate = function(e){if(e.state){cur.innerHTML = e.state.page;}else{cur.innerHTML = 0;}
}
HTML5历史状态管理只有简单的几个函数
短短几行代码,就可以增加状态记录的功能
现在各个浏览器都实现了这个功能
主页传送门
HTML5历史状态管理history API-pushState/replaceState与popstate事件相关推荐
- h5 的 pushState, replaceState 和 popstate 事件
我们可以使用location.hash来模拟ajax的前进后退功能.但是使用location.hash存在下面几个问题: 1.使用location.hash会导致地址栏的url发生变化,用户体验不够友 ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻--,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- popstate_H5,API的pushState(),replaceState()和popstate()用法
pushState和replaceState是H5的API中新添加的两个方法.通过window.history方法来对浏览器历史记录的读写. pushState和replaceState 在 HTML ...
- H5路由的pushState(),replaceState()和popstate()用法
History路由的pushState,replaceState和popstate的区别 HTML5中引入了history.pushState().history.replaceState().p ...
- ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
- PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)
说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...
- 「前端」History API与浏览器历史堆栈管理
本文由尚妆前端开发工程师欲休撰写 本文发表于尚妆博客,欢迎订阅! 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash ...
- Html5 History API解析
浏览器前进与回退操作 在传统的浏览器中我们只能通过调用window.history对象的 forward() . back() 或 go(number|url) 方法来进行页面的前进.回退或跳转到某一 ...
- HTML5无刷新修改URL:利用 History API 无刷新更改地址栏
为什么80%的码农都做不了架构师?>>> HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转. 简单来说:假设当前页面为ren ...
最新文章
- Scala学习之类和属性篇(一):定义类的主构造方法
- matlab编程风格
- HTTP的四种请求方法
- 语音识别基础,总有一天你会用到
- 【剑指offer】二叉树的深度_solution2
- numpy_basic
- java 集合初始化_6种方法初始化JAVA中的list集合
- 初识IOS,Label控件的应用。
- C机顶盒开发实战常量定义方式、结构定义方式(可理解为对象Model)
- 将哔哩哔哩手机端缓存视频导出为正常mp4视频.
- Modelsim添加中间变量
- 一篇文章让你学会JWT令牌认证
- 安卓神器-kiwi browser
- LOG4cxx安装指南
- 使用golang链接达梦数据库
- Cygwin warning: could not find /tmp, please create! 问题
- 2021最新css3面试题理论,前端css面试题,移动端面试题理论。
- python元组读取到列表_Python 学习笔记(1)Python容器:列表、元组、字典与集合...
- matlab 中 strcat函数的用法
- 有限元中四面体的一些积分公式
热门文章
- [VLDB 2021]ICS-GNN_ Lightweight Interactive Community Search via Graph Neural Network
- 信号与系统第三章复习
- mesh和wifi中继的区别_一文看懂Mesh路由和无线中继的差异
- QRCode生成二维码和解析二维码
- Android+H5开发
- 计算机 打印格式 不一样,同一个EXCEL表格在不同电脑打印出来的不一样,如何解决?:excel表格自动变形...
- 设计模式的六大原则(SOLID)
- Docker使用docker compose搭建Jellyfin私人媒体服务器 个人电影网站
- window系统未能启动服务器,Windows系统下Apache服务器无法启动的问题解决
- Ubuntu14.04停留在开机logo界面