Prevent page back (disable browser back button)

Prevent page back (disable browser back button)

Principle: Replace the current history with the URL of the new page so that there is only one page in the browsing history, and the back button will never expire. 　　

　　　　　Note : History.go and History.back (including the user press the browser history forward Back button) trigger,

The Popstate event is triggered by a page that modifies history with pushstate.

"Code as follows"

<script type= "Text/javascript" >
JQuery (document). Ready (function ($) {
if (window.history && window.history.pushState) {
$ (window). On (' Popstate ', function () {
Window.history.forward (1);
});
}
});
</script>

The methods involved are described in detail:

window.history: Represents the history of a Window object

Ii. Progress and retreat of historical records

Window. History. forward () ---This method loads the next URL in the History list, clicking the Forward button with the browser;
Window. History. Back () ---This method loads the previous URL in the History list, and then clicks the rewind button with the browser.
 

Can be moved to a specified history point:
By specifying a value relative to the current page position , you can use the Go () method to load the page from the history of the current session
(the current page position index value is 0, the previous page is-1, the next page is 1)
For example, to rewind a page (equivalent to calling back ()):
Window.history.go (-1);
Move forward one page (equivalent to calling Forward ()):
Window.history.go (1);

　 window.history. length :

You can view the value of the length property to see how many record points are in the history stack.

Third, Operation history Record point

HTML5 's new API extends the window.history, enabling storage, replacing current history points, and listening to history points.
 

1. Store and replace the current history point
CreateCurrentHistorical point Pushstate (state, title, URL): Create (Add) a New history entity,
State: The Status object, the additional object that records the history point (the URL to jump to), can be empty;
Title: page title, currently all browsers are not supported;
URL: Optional URL, the browser does not check whether the URL exists, only changes url,url must be the same domain.
Window.history.pushState (JSON, "", "http://www.qingdou.me/post-1.html");
ReplaceCurrentHistorical Point Replacestate (): Modifies the current history entity and is not added.
Like replace (URL), using the Replacestate () method is more appropriate when you want to update the state object or URL of the current history.
 

2, listening history point onpopstate ()

The Popstate event will occur when the history entity is changed, and Onhashchange () can listen to the hash portion of the URL.

3. Read the existing state

When the page loads, it may have a non-empty state object. When the page reloads, the page receives the OnLoad event, but there is no popstate event.
However, if you read the History.state property, the state object will be obtained after the Popstate event occurs.

Prevent page back (disable browser back button)