码迷,mamicode.com
首页 > Web开发 > 详细

H5 应用程序返回button的js代码设计,设计仿stack

时间:2015-09-15 21:56:33      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:

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的地方调用

historyUtils.back();



版权声明:本文博主原创文章,博客,未经同意不得转载。

H5 应用程序返回button的js代码设计,设计仿stack

标签:

原文地址:http://www.cnblogs.com/hrhguanli/p/4811519.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!