How to detect browser URL changes

The user modifies the current URL by clicking Trigger, Operation History, and direct URL access. These three triggering methods will make the browser behave differently

HTML5 provides two ways to manipulate history in a page

• History.state
  • If the current URL is not generated by pushstate or replacestate, then history.state is null.
• History.pushstate (state, title, URL)
  • Adds the current URL and history.state to the history and replaces the current with the new state and URL. does not cause page refreshes and does not trigger Popstate events
• History.replacestate (state, title, URL)
  • Replace the current with the new state and URL. does not cause page refreshes and does not trigger Popstate events

Provides event popstate for detection history changes

• The event will be in corresponding window method, or history.replacestate () method modified popstate Event object state Span style= "Font-family:verdana, Arial, Helvetica, Sans-serif; line-height:1.5; " The property contains a copy of the state object for this history entry.

• The history.pushState() popstate event is either called or history.replaceState() not triggered.
• popstateEvent will only be triggered in browser actions such as click Forward or Back button (JS call), click Hyperlink, direct access URL, etc.

With this feature, you can handle the front-end fallback of a page without refreshes, saving the page state of the history operation.

Demo, please.

<a href= "#1" >text1</a><a href= "#2" >text2</a><a href= "#3" >text3</a><a href= " #4 ">text4</a><a href=" #5 ">text5</a><script>window.addeventlistener (' popstate ', function (event) {  readstate (event.state);}); for (i=0;i<5;i++) {    var stateobject = {id:i};    var title = "Wow title" +i;    var newurl = "/my/awesome/url/" +i;    History.pushstate (Stateobject,title,newurl);} function ReadState (data) {  alert (data.id);} </script>

　　

Hashchange

Triggered when a URL's parameter list (and all strings after the "#" in the URL) changes, the hash change does not trigger the browser to request a resource, nor is it one of the solutions for Ajax to preserve the browser's history.

Compatible with the following:

• ie8+ | ff3.6+ | safari5+ | Chrome | Opera 10.6+ supports Hashchange
• The event object has two properties: Oldurl and Newurl, ff3.6+ Chrome Opera supports Oldurl and Newurl

The Popstate event is also triggered when the string after "#" in the URL changes

in the IE6, 7 can be used for timed cycle detection or the addition of hidden IFRAME to solve the way, such as:

if ((' Onhashchange ' in Window) && ((typeof document.documentmode=== ' undefined ') | | document.documentmode==8)) {    //Browser support Onhashchange event    window.onhashchange = Hashchangefire;  TODO, corresponding to the new hash execution of the operation function} else {    //does not support the method of detection with the timer    setinterval (function () {        //detection of the hash value or whether a part of it is changed, In the low version of IE browser by window.location.hash out of the fingers and other browsers, pay attention to the var ischanged = ishashchanged ();          if (ischanged) {            hashchangefire ();  TODO, corresponding to the new hash execution of the operation function        }    }, 150);}

　　

How to detect browser URL changes