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

内嵌客户端的网页，希望能在页面上，实现浏览器的前进和后退功能，类似浏览器左上角的按钮。

前进和后退是很简单的，通过window.history对象的相关方法，比如go、forward、back即可实现，关键是，如何判断当前是否已经前进(后退)到最前面(后面)一页了呢？

经过一阵思考，最终我使用了cookie来存储用户浏览信息的方式，在cookie中存放一个数字，该数字表示用户当前正在浏览历史记录中的第几页。历史记录的总页数通过history的length属性来获取。

具体实现为：用户每点击一次页面上的跳转链接，都会在cookie中设置一个cur_news_page变量，该变量代表的，即是用户当前正在浏览历史记录中的第几页；用户每次点击前进、后退按钮，都会对这个值进行加减操作；最终通过这个值与history.length的比较，判断是否已经前进(后退)到最前面(后面)一页。

// @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));  
        history.go(-1);  
    };  
      
    _init = function () {  
        _initSwitchPageEvent();  
    };  
      
    _init();  
};  

 

发现了一个问题，就是当用户已经浏览过其他页面、或者在点击返回按钮后，继续点击新页面链接的情况下，昨天写的这个模拟功能会存在bug，因为此时history.length已经有了一个不为1的初始值，导致程序中判断后会出现bug。细想还是因为自己急于项目进度，没有仔细弄懂浏览器前进后退的机制。今天测试了一下浏览器这两个按钮的功能，发现点击后退，再点击新页面链接时，后退过的那部分页面信息会被删除掉。比如，我按照次序浏览了ABCDE五个页面(history.length=5)，然后通过返回按钮，返回到了C页面(history.length=5)，然后再点击页面上的新链接，进入X(history.length=3)Y(history.length=4)Z(history.length=5)这三个页面，那么此时，history.length应该等于5，即ABXYZ的浏览记录。

弄清楚了这个机制，再修改一下代码，总算搞定了问题。实现原理是通过在cookie中存储两个变量，一个模拟history.length的值，另一个代表用户在历史记录中的坐标。

// @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    :   当前页下标 
     * total_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 curPage = Util.Cookies.get('cur_news_page');  
        curPage = curPage || 1;  
        curPage = parseInt(curPage) + 1;  
        Util.Cookies.set('cur_news_page', curPage);  
        Util.Cookies.set('total_news_page', curPage);  
          
    };  
      
    /** 
     * 是否为第一页 
     * @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');  
        var totalPage = Util.Cookies.get('total_news_page');  
        curPage = curPage || 1;  
        totalPage = totalPage || 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));  
        history.go(-1);  
    };  
      
    _init = function () {  
        _initSwitchPageEvent();  
    };  
      
    _init();  
};