×

HTML5里的pushstate与监听浏览器返回解决的问题

作者:andy0012020.08.12来源:Web前端之家浏览:111评论:0
关键词:jshtml5

实际开发我们在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);

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/js20200812a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    点多...

  • kaifa8

    小公司很少会去搞这种开发自动化,都只是看重结果。...

  • 访客

    你可以加群去问...

  • 访客

    怎么注册?不会...

  • ajoy

    说法可以是一样的,毕竟JS和JQ都是有“血缘关系”的,你可以自己改下不就可以了吗,哈哈!...

  • 访客

    标题是JS用了JQ误人子弟呢...

  • absoy

    vue居然还能这么玩,期待你们vue3.0中文版教程。...

  • caij2

    github也中了新冠病毒了吧,哈哈!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.4 Valyria

时时彩平台哪个好 福建11选5走势一 山东十一选五人工计划 股票查询 能赢现金的棋牌游戏 排列五最近500期开奖号码 ps软件下载手机版 江西快三基本走势一定 股票融资比例查询 二分pk10人工计划软件 山西快乐10分走势图下载 pc蛋蛋赌博喊话 多乐彩11选5规则 今晚江苏体彩七位数预测 免费一码大公开 股票历史走势查看 河北20选5下期杀号推荐