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和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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获取淘宝分类id示例
2014/01/16 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
php接口隔离原则实例分析
2019/11/11 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
python实现FTP服务器服务的方法
2017/04/11 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python3实现字符串操作的实例代码
2019/04/16 Python
女性时尚在线:IVRose
2019/02/23 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
SQL Server面试题
2013/04/04 面试题
私有程序集与共享程序集有什么区别
2013/04/05 面试题
护士的自我鉴定
2014/02/07 职场文书
新闻编辑求职信
2014/04/09 职场文书
精神文明单位申报材料
2014/05/02 职场文书
网络优化专员求职信
2014/05/04 职场文书
党员违纪检讨书
2015/05/05 职场文书
家长会后的感想
2015/08/11 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android