最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
html5的pushstate以及监听浏览器返回事件实现方法
时间：2022-06-25 17:54:31 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下html5的pushstate以及监听浏览器返回事件实现方法，文章介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
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);
相关文章
- 2024金摇杆奖年度游戏名单 11-22
- 用针在纸上绣画是哪种非遗技艺 蚂蚁新村11月21日答案最新 11-22
- 重返未来1999纸信圈儿什么时候up 为什么故事集卡池活动介绍 11-22
- 重返未来1999雾中盛会怎么玩 UTTU聚光专栏雾中盛会活动介绍 11-22
- 光遇姆明季后续版本怎么玩 光遇音乐节宴会节活动介绍 11-22
- 无期迷途四星装束是谁 无期迷途首个四星装束剪影介绍 11-22