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的特性改变文本选中时的颜色
Sep 11 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
Node.js的特点详解
2017/02/03 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
浅谈Python的文件类型
2016/05/30 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
C语言笔试题回忆
2015/04/02 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
初三物理教学反思
2014/01/21 职场文书
项目负责人任命书
2014/06/04 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技