Simulate the browser forward and backward functions on the web page

Source: Internet
Author: User

In a recent project, the product manager wants to implement the browser's forward and backward functions on the webpage, similar to the buttons in the upper left corner of the browser.
Forward and backward are very simple, through the window. methods related to the history object, such as go, forward, and back, can be implemented. The key is how to determine whether the current process has been moved forward (backward) to the Front (back) page?
After a while of thinking, I finally used cookies to Store Users' browsing information, and stored a number in the cookie, which indicates the page number of the user's browsing history. The total number of pages of history records is obtained through the length attribute of history.
The specific implementation is: each time a user clicks a jump link on the page, a cur_news_page variable is set in the cookie, which represents the page number of the user's current browsing history; each time you click the forward and backward buttons, the value is added or subtracted. The value is associated with history. compare the length to determine whether it has been forward (backward) to the Front (back) page.
The Code is as follows:
[Javascript]
// @ Charset "UTF-8 ";
// Top toolbar
Var Controller_Toolbar = function (){
Var self = this,
_ IsFirstPage = null,
_ IsLastPage = null,
_ InitSwitchPageEvent = null,
_ Forword = null,
_ Goback = null,
_ SetCount = null,
_ Init = null;

/**
* Toolbar events (forward and backward)
* Idea: store Integer Variables in cookies to determine the location of the page currently browsed by the user
* Cur_news_page: subscript of the current 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 ();
}
});


// Initial Style
If (! _ IsFirstPage ()){
$ ('. Back_disabled'). removeClass ('back _ disabled '). addClass ('back ');
}
If (! _ IsLastPage ()){
$ ('. Forword_disabled'). removeClass ('forword _ disabled '). addClass ('forword ');
}
};

/**
* Value assignment of counting Variables
*/
_ SetCount = function (){
Var totalPage = history. length | 1;
Util. Cookies. set ('cur _ news_page', (parseInt (totalPage) + 1 ));

};

/**
* Whether it is the first page
* @ Returns {Boolean}
*/
_ IsFirstPage = function (){
Var curPage = Util. Cookies. get ('cur _ news_page '),
CurPage = curPage | 1;
If (curPage = 1 ){
Return true;
}
Return false;
};

/**
* Whether it is the last page
* @ 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;

};

/**
* Forward
*/
_ Forword = function (){
Var curPage = Util. Cookies. get ('cur _ news_page ');
Util. Cookies. set ('cur _ news_page', (parseInt (curPage) + 1 ));
History. go (+ 1 );

};

/**
* Backward
*/
_ 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 ();
};
Author: xinsheng2011

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.