Use popstate events in history and window objects to handle browser issues Jump

Use popstate events in history and window objects to handle browser issues Jump

 

Primer

Before occasionally used in the project history interfaces do return to the previous function, it was used history.go (-1), a few days before the interview a bit ignorant in the face of a control problem browser jump, specifically checked the documentation a bit, and lists some of the applications currently can think of:

popstate event

Documents Address

When the activity history entry changes will trigger popstate event. If the history entry is activated by a call to history.pushState () created, or affected to history.replaceState () call, a copy of the state of the object of state property popstate events include historical items.

As far as I know now, both the browser's forward or back will trigger popstate this event, you can only play the role of a monitor page change.

History Interface

• Attributes
  • The number of elements in the history of representation History.length session
  • History.scrollRestoration allows Web applications on the history of navigation explicitly set the default scrolling behavior recovery. This property may be automatic (Auto) or manually (manual).
  • History.state returns a value of the state at the top of the stack historical representation. This is a do not have to wait for an event to view the status and popstate way.
• method

  • History.back()

    Equivalent to history.go (-1)

  • History.forward()

    Equivalent to historygo (1)

  • History.go()

    This method does not, or if the argument is out of range will not effect from

  • History.pushState()

    pushState () takes three parameters: a state object, a title (now ignored), and an optional URL address. The following three parameters will be careful inspection

  function pushHistory() {  
    var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); } 

  Other methods will not list them, interested to see the document

  Listener browser back button

  function pushHistory() {  
    var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); } pushHistory(); window.addEventListener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);

  The place to monitor the return of the event browser, but I have a question, if you do not first address to monitor a pushState not jump directly, this is temporarily not get to know, know that there is a small partner can leave a message to talk about.

  Back prohibit a solution of

  history.pushState(null, null, document.URL);
  window.addEventListener("popstate",function(e) { console.log(e); history.pushState(null, null, document.URL); }, false);

  In fact, this is the use of pushState insert the current page to the browser history list before clicking back and clicks are inserted once, so regardless of the point forward or back will always stay in this page the

 

Reprint: Forget address the

Primer

Before occasionally used in the project history interfaces do return to the previous function, it was used history.go (-1), a few days before the interview a bit ignorant in the face of a control problem browser jump, specifically checked the documentation a bit, and lists some of the applications currently can think of:

popstate event

Documents Address

When the activity history entry changes will trigger popstate event. If the history entry is activated by a call to history.pushState () created, or affected to history.replaceState () call, a copy of the state of the object of state property popstate events include historical items.

As far as I know now, both the browser's forward or back will trigger popstate this event, you can only play the role of a monitor page change.

History Interface

• Attributes
  • The number of elements in the history of representation History.length session
  • History.scrollRestoration allows Web applications on the history of navigation explicitly set the default scrolling behavior recovery. This property may be automatic (Auto) or manually (manual).
  • History.state returns a value of the state at the top of the stack historical representation. This is a do not have to wait for an event to view the status and popstate way.
• method

  • History.back()

    Equivalent to history.go (-1)

  • History.forward()

    Equivalent to historygo (1)

  • History.go()

    This method does not, or if the argument is out of range will not effect from

  • History.pushState()

    pushState () takes three parameters: a state object, a title (now ignored), and an optional URL address. The following three parameters will be careful inspection

  function pushHistory() {  
    var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); } 

  Other methods will not list them, interested to see the document

  Listener browser back button

  function pushHistory() {  
    var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#xx"); } pushHistory(); window.addEventListener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);

  The place to monitor the return of the event browser, but I have a question, if you do not first address to monitor a pushState not jump directly, this is temporarily not get to know, know that there is a small partner can leave a message to talk about.

  Back prohibit a solution of

  history.pushState(null, null, document.URL);
  window.addEventListener("popstate",function(e) { console.log(e); history.pushState(null, null, document.URL); }, false);

  In fact, this is the use of pushState insert the current page to the browser history list before clicking back and clicks are inserted once, so regardless of the point forward or back will always stay in this page the

 

Reprint: Forget address the