H5 应用返回按钮的js代码设计，设计思想模仿stack

最新推荐文章于 2024-05-14 10:30:09 发布

骑毛驴上塔楼

最新推荐文章于 2024-05-14 10:30:09 发布

阅读量2.1k

点赞数 1

分类专栏： web前端 javascript html5 文章标签： javascript js stack history history.back

本文链接：https://blog.youkuaiyun.com/myliveisend/article/details/46351513

版权

web前端同时被 3 个专栏收录

8 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

html5

1 篇文章

订阅专栏

本文介绍了一种用于H5应用的自定义返回逻辑实现方法，通过JavaScript代码改进了浏览器默认的history.back()功能，使其更适用于模拟手机应用的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

history.back();

这段代码有天然的缺陷，使用过的都知道，在H5的应用，特别是模仿手机应用的时候，这个不够用。

特写了一段js来实现类似的功能，如有重复和不喜请轻喷。

不多说，上代码：

/**
 * Created by piggsoft@163.com on 2015/5/28.
 */
var historyUtils = {
    add : function (url) {
        var historyArray = historyUtils.getLocal();
        if (!historyArray) {
            historyArray = [];
        }
        var currentPage = historyArray.pop();
        if (currentPage && currentPage == url) {
            //do nothing
        } else if (currentPage){
            historyArray.push(currentPage); //历史里面没有现在传入的url，在加回去
        }
        historyArray.push(url);
        historyUtils.saveLocal(historyArray);
    },
    back : function() {
        var historyArray = historyUtils.getLocal();
        var currentPage = historyArray.pop();//去掉当前页面，pop取最后，类似stack
        var history = historyArray.pop();
        if (!history) {//没有历史页面
            historyUtils.add(currentPage);//将当前页面加入回数组中
            return;
        }
        historyUtils.saveLocal(historyArray);
        window.location.href = history;
    },
    getLocal : function() {
        var result = window.sessionStorage.getItem(historyUtils.key);
        if (!result) {
            return null;
        }
        return JSON.parse(result);
    },
    saveLocal : function(data) {
        window.sessionStorage.setItem(historyUtils.key, JSON.stringify(data));
    },
    init : function() {
        historyUtils.saveLocal([]);
    },
    key : "_history_"
}

historyUtils.add(window.location.href);

在需要实现back的地方调用