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 选择器 属性选择器介绍
Jan 21 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
3种php生成唯一id的方法
2015/11/23 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
javascript parseInt 大改造
2009/09/27 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python统计cpu利用率的方法
2015/06/02 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python字典key不能是可以是啥类型
2020/08/04 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
保护环境倡议书范文
2014/05/13 职场文书
七一建党节演讲稿
2014/09/11 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python