当前位置:编程学习 > JAVA >>

网页上模拟浏览器前进后退功能

最近的一个项目,因为是内嵌客户端的网页,产品经理希望能在页面上,实现浏览器的前进和后退功能,类似浏览器左上角的按钮。
前进和后退是很简单的,通过window.history对象的相关方法,比如go、forward、back即可实现,关键是,如何判断当前是否已经前进(后退)到最前面(后面)一页了呢?
经过一阵思考,最终我使用了cookie来存储用户浏览信息的方式,在cookie中存放一个数字,该数字表示用户当前正在浏览历史记录中的第几页。历史记录的总页数通过history的length属性来获取。
具体实现为:用户每点击一次页面上的跳转链接,都会在cookie中设置一个cur_news_page变量,该变量代表的,即是用户当前正在浏览历史记录中的第几页;用户每次点击前进、后退按钮,都会对这个值进行加减操作;最终通过这个值与history.length的比较,判断是否已经前进(后退)到最前面(后面)一页。
代码如下:
[javascript] 
// @charset "utf-8"; 
// 顶部工具栏 
var Controller_Toolbar = function () { 
    var self = this, 
        _isFirstPage = null, 
        _isLastPage = null, 
        _initSwitchPageEvent = null, 
        _forword = null, 
        _goback = null, 
        _setCount = null, 
        _init = null; 
     
    /**
     * 工具栏事件(前进、后退)
     * 思路:在cookie中存储Integer型变量以确定用户当前浏览的页面位置
     * cur_news_page    :   当前页下标
     */ 
    _initSwitchPageEvent = function () { 
        $('.back').live('click', function () { 
            if (!_isFirstPage()) { 
                _goback(); 
            } 
        }); 
        $('.forword').live('click', function () { 
            if (!_isLastPage()) { 
                _forword(); 
            } 
        }); 
         
        $('.btn_left').click(function () { 
            _setCount(); 
        }); 
        $('.btn_right').click(function () { 
            _setCount(); 
        }); 
        $('.highlight_tip > span').click(function () { 
            if (!$(this).hasClass('current')) { 
                _setCount(); 
            } 
        }); 
         
         
        // 初始样式 
        if (!_isFirstPage()) { 
            $('.back_disabled').removeClass('back_disabled').addClass('back'); 
        }  
        if (!_isLastPage()) { 
            $('.forword_disabled').removeClass('forword_disabled').addClass('forword'); 
        } 
    }; 
     
    /**
     * 计数变量的赋值
     */ 
    _setCount = function () { 
        var totalPage = history.length || 1; 
        Util.Cookies.set('cur_news_page', (parseInt(totalPage) + 1)); 
         
    }; 
     
    /**
     * 是否为第一页
     * @returns {Boolean}
     */ 
    _isFirstPage = function () { 
        var curPage = Util.Cookies.get('cur_news_page'), 
        curPage = curPage || 1; 
        if (curPage == 1) { 
            return true; 
        } 
        return false; 
    }; 
     
    /**
     * 是否为最后一页
     * @returns {Boolean}
     */ 
    _isLastPage = function () { 
        var curPage = Util.Cookies.get('cur_news_page'); 
        curPage = curPage || 1; 
        var totalPage = history.length || 1; 
        if (curPage == totalPage) { 
            return true; 
        } 
        return false; 
         
    }; 
     
    /**
     * 前进
     */ 
    _forword = function () { 
        var curPage = Util.Cookies.get('cur_news_page'); 
        Util.Cookies.set('cur_news_page', (parseInt(curPage) + 1)); 
        history.go(+1); 
         
    }; 
     
    /**
     * 后退
     */ 
    _goback = function () { 
        var curPage = Util.Cookies.get('cur_news_page'); 
        Util.Cookies.set('cur_news_page', (parseInt(curPage) - 1)); 
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,