Shulou(Shulou.com)06/02 Report--

This article will explain in detail the reasons why ajax can not go back. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Because ajax and the browser's history.back () and forward () are not friendly and cannot move forward or backward, the solution is to let the corresponding menu execute Ajax loading according to the query content in the current URL address.

This article operating environment: windows7 system, javascript1.8.5 version, Dell G3 computer.

An example of solving the problem that ajax cannot be backed up

We all know that ajax has an obvious disadvantage is that it is not friendly with the browser's history.back () and forward (), and can't move forward or backward.

Instance address: an instance that solves the problem that ajax cannot be backed up

Solution:

Window.history instance

Print out an instance of window.history in console, and you can view the prototypes of related objects.

Length:length is the length of the browsing record queue. Since this page is newly opened, there is only information about the current page link in the queue, with a value of 1.

State:

PushState: that's window.history.pushState ()

ReplaceState: that's window.replaceState ()

Usage:

Window.history.pushState ({status: 0},'','? data=1')

Changed browser address

It is important to note that if it runs locally, it will work perfectly on both ie and Firefox, but now the new version of Google will report an error because of Google's security mechanism. There should be no such error if the code is placed on the server.

So here's the way to solve the problem:

1. Each time I manually click the menu on the left, I will query the content of the Ajax address (? The following is attached to the address of the demo HTML page and stuffed into the browser history using history.pushState.

two。 The _ window.onpopstate event is triggered when the browser moves forward and backward. By binding the popstate event, the corresponding menu can be loaded by Ajax according to the query content in the current URL address, thus realizing the forward and backward effects of Ajax.

3. When the page loads for the first time, if there is no query address, or if the query address does not match, the query content of the Ajax address of the first menu is used, and the current browser history is changed using history.replaceState, and then the Ajax action is triggered.

This is the end of the article on "the reasons why ajax can not fall back". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.