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 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 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
PHP环境搭建的详细步骤
2016/06/30 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
Python多线程下载文件的方法
2015/07/10 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
人大调研汇报材料
2014/08/14 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
工作态度检讨书范文
2015/05/06 职场文书
Python进度条的使用
2021/05/17 Python
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电