網頁上模擬瀏覽器前進後退功能

最近的一個項目,因為是內嵌客戶端的網頁,產品經理希望能在頁面上,實現瀏覽器的前進和後退功能,類似瀏覽器左上角的按鈕。
前進和後退是很簡單的,通過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)); 
        history.go(-1); 
    }; 
     
    _init = function () { 
        _initSwitchPageEvent(); 
    }; 
     
    _init(); 
}; 
作者:xinsheng2011

You May Also Like