Simulate window's History object

The History of window is a historical item object, and in the browser, the history item is stored in a history stack and operated by a series of functions such as Go ().

Recently encountered a project, the main requirement is that the HTML page into the app, the app contains a webview to display HTML, and provides two buttons, a close button (Close WebView and return to the app other interface), a Back button, back page, that is, the browser's Back button. Requirements require that all pages not jump, that is, the need to switch through the div to simulate multiple pages.

So the original history of the object we can not use, but the principle of the design of a self-record stack is still feasible, and the demand does not involve forward, only focus on the back . Specific ideas are as follows:

One, define an array to emulate the stack, and we know that the JavaScript array has pop and PUSP functions, so we make the array as a history stack.

Assign a variable to each div (or directly with an ID) to identify the Div.

Third, define the Goto () function, according to the parameters (in fact, the number of times the stack) out of the stack.

Four, each div switch need div ID into the stack.

The following code does not make any practical sense, just let the article look at the number of words, specific how to make an array of examples of perfect stack objects, mainly in accordance with their own ideas to design as well, concrete implementation will be various.

varHistorystack =NewArray ();//page history Stack//back one time .functionGoto (STEP) {//functions for the app    varStacklength = Historystack.length;//Get stack Length (number of contents)    if(Stacklength = = 0 ) {        return0;                                  } msg (stacklength); //Debug InformationMSG (historystack[stackLength-1]);//Debug Info, take out the IDShowdiv (historystack[stackLength-1],false);//get stack Top Id,false write it casually}//Display div based on ID parameterfunctionShowdiv () {varElem, Nextelem, Elemclass, Nextelemclass, Arglength=arguments.length; Switch(arglength) { Case1:        //in-stack displayElem = document.getElementById (Thisdivid);//Gets the current page DomNextelem = document.getElementById (Arguments[0]);//Get next page DomElemclass = Classlist (elem);//module withNextelemclass = Classlist (Nextelem);//module withElemclass.remove ("show");//Hide Current PageNextelemclass.add ("show");//Show Next PageHistorystack.push (Thisdivid);//Press the page you want to hide into the stackThisdivid = Arguments[0];//Save current Page ID        Try{mobileandroidapp.isback (true);//tell the SDK to become a back button        }          Catch(ERR) {alert (err.message); }         Break;  Case2:        //Out Stack displayElem = document.getElementById (Thisdivid);//Gets the current page DomNextelem = document.getElementById (Arguments[0]);//Get next page DomElemclass = Classlist (elem);//module withNextelemclass = Classlist (Nextelem);//module withElemclass.remove ("show");//Hide Current PageNextelemclass.add ("show");//Show Previous PageThisdivid = Historystack.pop ();//out of the stack, save the currently displayed page ID        if(Historystack.length = = 0) {//There's nothing in the stack, it means the first page.            Try{mobileandroidapp.isback (false);//Tell the SDK to turn the Close button            }            Catch(ERR) {alert (err.message); }        }         Break; default:        return0;  Break;                                       } console.dir (Historystack); //Show Stack status}

Simulate window's History object