谈谈HTML5中的history.pushSate方法,弥补ajax导致浏览器前进后退无效的问题
移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据。这种情况用单页面实现再合适不过了。
一般都是通过修改URL的hash,然后通过监听hashchange来达到模拟切换页面的效果。搞定之后,客户端也就是高大上的IOS开发工程师说获取不到webview的history,擦,hashchange明明会产生浏览器的history,怎么会获取不到,哥之前一直都这么做的,也没有客户端的说获取不到啊,是你自己不知道怎么获取吧....当然,这话是在心里说的。他还把这事给经理说了....我去,然后我就知道了还有HTML5中pushstate这么个玩意。
先回顾下window.history吧。
History 对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。
History 对象属性
length:返回浏览器历史列表中的 URL 数量。
History 对象方法
back():加载 history 列表中的前一个 URL。即后退
forward():加载 history 列表中的下一个 URL。即前进
go():加载 history 列表中的某个具体页面。这个是最常用的
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。
咱们来接着说两个HTML5 history新增的好哥们:History.pushState()和
History.replaceState()
history.pushState(state, title, url)
意思就是把一个history记录插入到历史记录中。
state:与要跳转到的URL对应的状态信息。
title:页面标题。
url:要跳转到的URL地址,不能跨域。
history.replaceState(state, title, url)
用新的state和URL替换当前。不会造成页面刷新。
state:与要跳转到的URL对应的状态信息。
title:页面标题。
url:要跳转到的URL地址,不能跨域。
window.onpopstate
history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。
大致的思路就是自己创建一个对象记录,然后把它插入到浏览器的历史记录,点击浏览器的前进后退按钮会触发onpopstate,然后判断当前的记录做对应的操作。
与传统的AJAX的区别
传统的ajax有如下的问题:
虽然ajax可以无刷新改变页面内容,但无法改变页面URL
其次为了更好的可访问性,内容发生改变后,改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题
有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变
再有,ajax的使用对搜索引擎很不友好,往往蜘蛛爬到的区域是空的
为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。
注意事项:
1、onpopstate只有在点击浏览器的前期和后退才会触发;
2、pushState能够改变浏览器地址栏中的hash,但是它不会触发hashchange事件,所以想通过监听hashchange来执行是无效的。
3、pushState不会刷新页面,刷新页面咱就压根不会用它了。
本地一个简单实例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>pushState</title><style type="text/css">.hidden {display: none;}</style><script type="text/javascript" src="zepto.min.js"></script> </head><body><section id="step1" class="step-contain" step="1"><p>第1步</p><button class="step-btn" step="1">下一步</button></section><section id="step2" class="step-contain hidden" step="2"><p>第2步</p><button class="step-btn" step="2">下一步</button></section><section id="step3" class="step-contain hidden" step="3"><p>第3步</p></section><script type="text/javascript">$(function() {stepProgress();function stepProgress() {var options = {curStep: 1,nextStep: null}var defaultState={"step": options.curStep,"url": "#step=" + options.curStep}window.history.pushState(defaultState, "", defaultState.url);$(".step-btn").on("click", function() {var step = parseInt($(this).attr("step"));options.nextStep = step + 1;var state = {"step": options.nextStep,"url": "#step=" + options.nextStep}window.history.pushState(state, "", state.url);console.log(state.step)swapStaus(options.nextStep);});function swapStaus(step) {$(".step-contain").each(function() {var tmpStep = $(this).attr("step");if (parseInt(tmpStep) == step) {$("#step" + tmpStep).removeClass("hidden");} else {$("#step" + tmpStep).addClass("hidden");}});options.curStep = step;}$(window).on("popstate",function(){var currentState = history.state;goStep=currentState.step?currentState.step:1;swapStaus(goStep)})}})</script> </body></html>
转载于:https://www.cnblogs.com/hutuzhu/p/4535234.html
谈谈HTML5中的history.pushSate方法,弥补ajax导致浏览器前进后退无效的问题相关推荐
- html5中的图片的location,HTML5中的History和Location对象
今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API.我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用. 我很久之前就 ...
- html5中插入样式表方法,如何插入css样式?
如何插入css样式?下面本篇文章就来给大家介绍一下插入css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 准备 1.首先准备一个html文件:test.html,不建议 ...
- html5中页面关闭事件监听,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
- html5 九宫格猜字游戏,HTML5中 九宫格 的编写方法
* { margin: 0; padding: 0; } #box { position: relative; } #box div { border-radius: 10px; width: 100 ...
- js中的history内置对象在各浏览器中的用法:
1><div οnclick="history.back()">返回测试1</div> 2><a href="#" ο ...
- vue页面数据不显示_PHP7中session_start 使用注意事项,会导致浏览器刷时页面数据不更新...
//PHP7中session_start 使用注意事项, session_start(['cache_limiter' => 'private', //在读取完毕会话数据之后马上关闭会话存储文件 ...
- 用html语言编写搜索栏,html5中如何制作搜索栏
html5中制作搜索栏的方法:首先新建一个div,id名为box,用来包裹搜索框:然后在内部添加一个input标签和一个div标签:最后使用css为它们设计样式即可. 本教程操作环境:windows7 ...
- html唤醒手机app,怎么在html5中唤醒APP
怎么在html5中唤醒APP 发布时间:2021-06-06 16:24:00 来源:亿速云 阅读:90 作者:Leah 怎么在html5中唤醒APP?相信很多没有经验的人对此束手无策,为此本文总结了 ...
- 用生动的例子花式解释:python类中一定需要有 __init__方法么?没有会怎样?
python 类中一定需要有 __init __方法么?没有的会怎样? 在回答这个问题之前,先说两个问题: ① 面向对象编程? ② 什么是类? 面向对象,先上一个正式点的解释: "把一组数据 ...
最新文章
- 统一用户及权限管理系统
- 2.1.4 进程通信
- java8方法引用符合_Java8 方法引用和构造方法引用
- 【算法系列之十二】最接近的三数之和
- 国内交流电频率和电压的历史渊源
- mysql --max_allowed_packet=32m,如何修改MySQL-max_allowed_packet
- 电脑磁盘清理_软件 | 功能强大的电脑磁盘清理工具中文优化版,有了它,你的电脑就像德芙巧克力一般丝滑...
- Volley源码学习1--volley结构图
- 达梦数据库迁移oracle数据乱码,oracle迁移到达梦数据库之存储过程中char类型的不同处理...
- 【fabric实战指南二】Fabric v1.0 部署过程原理详解
- 生信必备技巧之R语言基础教程03——逻辑数据用途及字符串处理
- PGP软件的安装及汉化
- 3DMAX 卸载工具,完美彻底卸载清除干净3dmax各种残留注册表和文件
- ggplot2作图之NMDS图
- 爬虫-爬取豆瓣电影排行榜
- RHCE(KVM——保存、恢复、克隆虚拟机)
- 【WPF学习手记】绘制箭头
- 下载高清的壁纸,这几个网站就够了
- excel shell合成_shell快速合并多个Excel表格
- 联想 ThinkPad x260无法通过U盘安装Windows 7问题解决办法
热门文章
- android中进程的优先级
- 《VMware Virtual SAN权威指南(原书第2版)》一3.4 VSAN网络配置之vSphere分布式交换机...
- Line上半年扭亏为盈 用户及营收遇瓶颈
- 用koa开发一套内容管理系统(CMS),支持javascript和typescript双语言
- Django REST framework API 指南(2):响应
- 十年后你用什么听音乐?
- 多年iOS开发经验总结(一)
- 解决Ubuntu中无法连接wifi的方法
- ubuntu 14.04服务器上使用nginx搭建wordpress博客详解
- 文件翻译002片:Process Monitor帮助文档(Part 2)