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