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