HTML5 's History object controls browser forward or backward events

<span id="Label3"></p><p><p>first, summary:</p></p><p><p>Summarize the methods used to manipulate the history of the browser with the historical object, using the MUI framework in the project, including the issues I encountered in the actual project.</p></p><p><p>second, summary:</p></p><p><p>Implementation Results:</p></p><p><p></p></p><p><p></p></p><p><p>Implementation Code:</p></p><p><p>The above editing page when loading the first call Pushhistory () method, if not first call, in the first click on the browser back button, will not pop up the prompt box, you have to press the return button on the phone page once, you click on the notification box, You can then press the Back button on the browser page to pop up the prompt box.</p></p><p><p>JS Key code:</p></p><p><p></p></p><p><p></p></p><p><p></p></p><p><p></p></p><p><p></p></p><p><p><strong>The following summarizes the usage of the history object:</strong></p></p><p><p>A) historical record of the way forward and backward:</p></p><p><p>1. Fallback method:</p></p><p><p></p></p><p><p>2. How to Proceed:</p></p><p><p></p></p><p><p>3. Move to the specified history point:</p></p><p><p>See how many pages there are in your browser:</p></p><p><p></p></p><p><p></p></p><p><p>4.popstate Events (listen for browser Click events):</p></p><p><p>The Popstate event is triggered whenever a change in the active history occurs.</p></p><p><p>That is, whenever you click on the Browser's forward or backward, it will trigger the Popstate event, the following code:</p></p><p><p></p></p><p><p>The above code can not add timers, depending on the actual situation, the above code is equivalent to:</p></p><p><p><strong>Window.onpopstate=function (e) {</strong></p></p><p><p><strong>CloseWindow ();</strong></p></p><p><p><strong>}</strong></p></p><p><p><strong>The official explanations are as follows:</strong></p></p><p><p><strong></strong></p></p><p><p></p></p><p><p>The 5.pushState () method is primarily to add history entries, and Replacestate is to modify history entries</p></p><p><p></p></p><p><p></p></p><p><p><strong>Summarize:</strong></p></p><p><p>Explain the above problem, when the page first load edit page to call the Pushhistory () method (mainly called Pushstate ()), mainly to change the Browser's history entries,</p></p><p><p></p></p><p><p>When loading the editing page (see below), because the Pushhistory () method is called, so the address of the browser will change, the address will be added to our pushstate add the parameter "#", plus "#", the display page is still the current editing page, when the user pressed the Browser's return key , the page returned to the "#" before the page, that is, the address of the page, is still the current editing page, because the current editing page history page changes, so it will trigger the Popstate event, which will call us to write the CloseWindow () method pop-up prompt Box.</p></p><p><p></p></p><p><p>similarly, If you did not call the Pushhistory () method at first, You do not add a history entry, the first time you go to the edit page and then press the Browser's return key, the list page will be returned directly (the project is from the list page into the edit page), Because the current edit page does not have a history entry change (the display of the ToolTip is on the edit page), the Popstate event is not triggered, and there is no pop-up notification box.</p></p>Reference: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history#popstate Events<p><p>(if There is something wrong, look at it ~)</p></p><p><p>HTML5 's History object controls browser forward or backward events</p></p></span>