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

history.back();

该代码具有天然的缺陷,二手知道,于H5应用,尤其是模仿移动应用程序时,,这是不够。

在放大期js为了实现类似特征,请轻喷。

不多说,上代码:

/**
 * Created by [email protected] 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();

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

时间: 2024-10-21 13:09:29

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

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

history.back(); 这段代码有天然的缺陷,使用过的都知道,在H5的应用,特别是模仿手机应用的时候,这个不够用. 特写了一段js来实现类似的功能,如有重复和不喜请轻喷. 不多说,上代码: /** * Created by [email protected] on 2015/5/28. */ var historyUtils = { add : function (url) { var historyArray = historyUtils.getLocal(); if (!histor

C# WinForm程序执行JS代码的多种方法

方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址   http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=D05FCF37-4D9F-4769-9442-0BCEEF907033 或者点击此处下载 Interop.MSScriptControl.dll 2.项目中引用 msscript.ocx 或者 Interop.MSScriptCon

前端程序员的蜕变——JS的 event 对象属性、使用实例、兼容性处理(极大提高代码效率、减少代码量)

下面讨论一下 js 中的 Event 对象,主要从以下三个方面详细的描述(点击标题可跳转到对应部分): 1.什么是event 2.怎么用event,用他该注意什么,几个简单实际应用 3.event在不同浏览器的存在的兼容问题,及如何去解决  1.  什么是event Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态等等.说的通俗一点就是,event是JS的一个系统内置对象.平时无法使用,当DOM元素发生按键.鼠标等等各种事件时,系统会自动根据D

WinForm程序执行JS代码的多种方法以及使用WebBrowser与JS交互

原文地址:http://www.cnblogs.com/feiyuhuo/p/5474790.html 方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址   http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=D05FCF37-4D9F-4769-9442-0BCEEF907033 或者点击此处下载 Interop.MSScriptCon

ReactMix框架,让你实现一套js代码,基于ReactNative在H5,App都能完美跑起来,Write Once,Run Anywhere

ReactNative框架推出已经有一段时间了,相信很多小伙伴都在尝试实现Write Once, Run Anywhere的梦想,比如淘宝的ReactWeb等等,但是这些框架都局限于因为ReactNative本省的局限性,比如不支持CSS,不支持DOM操作,不支持选择器等等,而没有办法实现Js代码的全平台统一,现在通过全新的ReactMix框架,你可以让你的代码不仅可以在ReactNative上跑起来,实现安卓和iOS代码的统一,而且同样一份代码也可以在PC,H5上跑起来,到底有多神气?让我们来

一行代码巧妙实现iOS返回button

一行代码巧妙实现iOS返回button: self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[[UIImage imageNamed:@"back"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]  style:UIBarButtonItemStyleDone target:self.navigationCon

弹性返回顶部JS代码

弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

手机端网页返回顶部js代码

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>手机端网页返回顶部js代码</title>  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m

JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)

编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { marg