Why can't ajax go back?

Because ajax is not friendly to the browser's history.back() and forward(), it cannot go forward or backward. The solution is to let the corresponding menu perform Ajax loading based on the query content in the current URL address. Can.

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

Why can't ajax go back? Example of solving the problem of ajax not being able to go back

We all know that ajax has an obvious shortcoming, which is that it is not friendly to the browser's history.back() and forward() and cannot go forward or backward.

Instance address: Solving the problem that ajax cannot go back. Example

Solution:

##window.history instance

Print the instance of window.history in the console and you can view the prototype of the related object.

length:length is the length of the browsing record queue. Since this page is newly opened, there is only information related to the current page link in the queue, and its value is 1

state:

pushState: is window.history.pushState();

replaceState: is window.replaceState();

Usage:

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

Changed browser address

It should be noted here that if it is run locally, it can run perfectly on IE and Firefox, but now the new version of Google will report an error. This is because Google's security issues. If the code is placed on the server, there should be no such error.

So the problem-solving ideas here:

1. Every time

manually click on the menu on the left, I will The query content of the Ajax address (the one after ?) is attached to the demo HTML page address, and is inserted into the browser history using history.pushState.

2. The forward and backward movement of the browser will trigger the window.onpopstate event. By binding the popstate event, the corresponding menu can be loaded according to the query content in the current URL address to implement Ajax. Forward and backward effects.

3. When the page is loaded for the first time, if there is no query address or the query address does not match, use the query content of the Ajax address of the first menu and use history.replaceState to change the current browser history. , and then trigger the Ajax operation.

Recommended learning: "

ajax video tutorial"

The above is the detailed content of Why can't ajax go back?. For more information, please follow other related articles on the PHP Chinese website!