网页上模拟浏览器前进后退功能
最近的一个项目，因为是内嵌客户端的网页，产品经理希望能在页面上，实现浏览器的前进和后退功能，类似浏览器左上角的按钮。
前进和后退是很简单的，通过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();};