zoukankan      html  css  js  c++  java
  • 模拟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 );                                       //显示栈状态
    }
  • 相关阅读:
    黑盒测试用例设计--题目3
    黑盒测试用例设计--题目2
    性能测试中TPS上不去的几种原因
    软件性能测试指标建议值
    Jmeter插件解释
    JDBC Connection Configuration配置正确,提示Error preloading the connection pool
    Vmware 不能上网
    dijkstra算法优先队列
    Django 模型与 Mysql 数据类型对应
    Win 无法安装 python 包
  • 原文地址:https://www.cnblogs.com/jingubang/p/4642499.html
Copyright © 2011-2022 走看看