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

昨天解决这个问题的时候，没有经过仔细测试，今天同事帮我发现了一个问题，就是当用户已经浏览过其他页面、或者在点击返回按钮后，继续点击新页面链接的情况下，昨天写的这个模拟功能会存在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();};