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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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 escape URL编码
2008/12/10 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
python实现超市商品销售管理系统
2019/10/25 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
工程招投标邀请书
2014/01/30 职场文书
团日活动总结范文
2014/04/25 职场文书
家长会欢迎标语
2014/06/24 职场文书
优秀团员事迹材料
2014/12/25 职场文书
初中差生评语
2014/12/29 职场文书
运输公司工作总结
2015/08/11 职场文书