html5的pushstate以及监听浏览器返回事件的实现


Posted in HTML / CSS onAugust 11, 2020

pushstate与监听浏览器返回解决的问题

1.实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了,因为组件与A页面此时在同一页面,点击返回时候 给人感觉是返回上上个页面,但之前A页面填写的东西 都没有了,这很影响体验。

因此可以使用pushstate方法,不刷新浏览器改变url 当你再返回时候就会返回到这个A页面而不是上上个页面。但此时还需要监听返回的按钮,进而控制组件的显示与隐藏。这点也至关重要。不然组件不隐藏,也就相当于没效果。

pushState

使用方法(一般情况)

function pushHistory() { 
var state = { title: "title", url: "#" }; 
window.history.pushState(state, "title", "#"); }

参数说明:

pushState() 带有三个参数:state是js对象,title是个标题(现在被忽略了),以及一个可选的URL地址。

关于pushstate的说明

浏览器不会向服务端请求数据,直接改变url地址,可以类似的理解为变相版的hash;但不像hash一样,浏览器会记录pushState的历史记录,可以使用浏览器的前进、后退功能作用。

监听浏览器返回按钮

window.addEventListener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);

转自:https://segmentfault.com/a/1190000022696823

到此这篇关于html5的pushstate以及监听浏览器返回事件的实现的文章就介绍到这了,更多相关html5的pushstate实现内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 #HTML / CSS
在html页面中取得session中的值的方法
Aug 11 #HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 #HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 #HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 #HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 #HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 #HTML / CSS
You might like
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
python处理json数据中的中文
2014/03/06 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python 查看文件的编码格式方法
2017/12/21 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
电子商务专业应届生求职信
2014/05/28 职场文书
小学运动会口号
2014/06/07 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
实施意见格式范本
2015/06/05 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript