您的位置：首页 > Web前端 > JavaScript

js响应手机物理返回键通过sessionStorage和历史记录实现

2017-03-28 10:16 597 查看

<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
<meta charset="UTF-8">
<title>响应手机返回键</title>
</head>
<style>
.prj-cover-floor {
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
}

.active {
display: block;
}
</style>

<body style="height: 100%;">
<div>
<button id="prj-filtrate-open-icon">点我出现浮层</button>
</div>
<div id="prj-cover-floor" class="prj-cover-floor"></div>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("#prj-filtrate-open-icon").on("click", function() {
//添加历史记录
history.pushState({
prjCoverFloor: "prj-cover-floor"
}, "");
//添加sessionStorage
sessionStorage.prjCoverFloor = true;
//浮层显示隐藏
$("#prj-cover-floor").attr("active") ? $("#prj-cover-floor").removeClass("active") : $("#prj-cover-floor").addClass("active");
});

/*
** 监听历史记录来响应手机物理返回键
*/
window.addEventListener("popstate", function(e) {
/*
** 整屏浮层
** 通过sessionStorage.prjCoverFloor判断 true是有浮层
** sessionStorage 页面存储 关闭页面会被清空
*/
if (String(sessionStorage.prjCoverFloor) == "true") {
$("#prj-cover-floor").removeClass("active"); //隐藏浮层
sessionStorage.prjCoverFloor = false; //更新sessionStorage
}
}, false);
</script>
</body>

</html>

//最早的时候想用hash或url参数来实现发现不好控制 因为点击返回时url已经变化了

//想要取上一个url没找到方法

//这种方式实现也会有个问题 如果添加了历史记录后面没有触发返回事件 就会多一条历史记录

//返回上个页面就要点击两次返回键

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 手机 h5 返回存储

相关文章推荐

新的分享

章节导航

js响应手机物理返回键 通过sessionStorage和历史记录实现

js响应手机物理返回键通过sessionStorage和历史记录实现