模拟window的history对象

window的history是历史条目对象,在浏览器里,历史条目是保存在一个历史记录栈里,并通过go()等一系列函数进行操作。

最近遇到一个项目,主要需求是HTML页面放到App里,App包含一个webView来显示HTML,并提供两个按钮,一个关闭按钮(关闭webView并返回app其他界面),一个是后退按钮,后退页面,也就是浏览器的后退按钮。需求要求所有页面不能跳转,也就是需要通过div的切换来模拟多个页面。

如此原生的history对象我们就不能用了,但是借鉴原理设计一个自己的历史记录栈还是可行的,并且需求不涉及前进,只关注后退。具体思路如下:

一、定义一个数组来模拟堆栈,并且我们知道JavaScript的数组具有pop和pusp函数,这样我们把数组做为一个历史记录栈。

二、给每个div分配一个变量(或者直接用id)来标识div。

三、定义goto()函数,根据参数(实际上就是出栈次数)进行出栈。

四、每一个div切换都需要div的id入栈。

以下代码并没有什么实际意义,只是让文章看着字数多点,具体如何把Array实例做成完善的栈对象,主要还是按照自己的思路来设计为好,具体的实现会多种多样的。

var historystack         = new Array();                  // 页面历史堆栈

// 后退一次
function goto( step ) {                                  // 给App用的函数
    var stackLength = historystack.length;               // 获取栈长度(内容个数)
    if ( stackLength === 0 ) {
        return 0;
    }
    msg( stackLength );                                  //debug信息
    msg( historystack[ stackLength-1 ] );                //debug信息,取出来的id
    showDiv( historystack[ stackLength-1 ], false );     //获取栈顶id,false随便写
}
// 根据id参数显示div
function showDiv() {
    var elem, nextElem, 
        elemClass, nextElemClass, 
            argLength = arguments.length;

    switch ( argLength ) {
    case 1:
        // 入栈显示
        elem           = document.getElementById( thisDivId );          //获取当前页面dom        
        nextElem       = document.getElementById( arguments[0] );       //获取下一页dom
        elemClass       = classList(elem);                              // 模块用
        nextElemClass = classList(nextElem);                            // 模块用
        elemClass.remove( "show" );                                     // 隐藏当前页
        nextElemClass.add( "show" );                                    // 显示下一页
        historystack.push( thisDivId );                                 //把需要隐藏的页压入栈内
        thisDivId       = arguments[0] ;                                // 保存当前页id
        try {
            mobileAndroidApp.isBack( true );                            // 告诉sdk变成后退按钮
        }  
        catch (err) {
            alert(err.message);
        }
        break;
    case 2:
        //出栈显示
        elem             = document.getElementById( thisDivId );        //获取当前页面dom        
        nextElem         = document.getElementById( arguments[0] );     //获取下一页dom        
        elemClass         = classList(elem);                            // 模块用
        nextElemClass     = classList(nextElem);                        // 模块用
        elemClass.remove( "show" );                                     // 隐藏当前页
        nextElemClass.add( "show" );                                    // 显示上一页
        thisDivId         = historystack.pop();                         // 出栈,保存当前显示页id
        if ( historystack.length === 0 ) {                              // 栈里没东西了,表示第一页
            try {
                mobileAndroidApp.isBack( false );                       // 告诉sdk变成关闭按钮
            }
            catch (err) {
                alert(err.message);
            }
        }
        break;
    default:
        return 0;
        break;
    }

    console.dir( historystack );                                       //显示栈状态
}

 

posted @ 2015-07-15 11:53  定海神针  阅读(880)  评论(0编辑  收藏  举报