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

最新推荐文章于 2024-07-08 13:45:00 发布

nanning_zhang

最新推荐文章于 2024-07-08 13:45:00 发布

阅读量4k

点赞数

文章标签： js 手机 h5 返回存储

本文链接：https://blog.csdn.net/zhang1027963459/article/details/67632376

版权

<!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没找到方法

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

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

nanning_zhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

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