AJAX web pages retain browser forward and backward functions_javascript skills

In some pages where AJAX is heavily used, sometimes you don't dare to refresh, because after refreshing, you may see a page that is very different from the original one. Let's not discuss the issue of whether to use AJAX when the content of certain pages is updated a lot. This article will briefly talk about retaining the browser's forward, backward, refresh and other functions.
Here we assume a page with two Tabs, each containing a large amount of text and possibly pictures. If you feel that the content of Tab2 is good now, add it to your favorites or send it to a friend. Next time you open it through favorites or a friend clicks on this link, you will most likely see the content of Tab1, and then you need to click Tab2 again to see the content you want to see. If the page logic is more complex, you may need to perform multiple steps to return to the content you want to see, which is not a good experience.
For functions such as refreshing and adding to favorites to work properly, the current operation needs to be reflected in the URI. However, changing the URI does not cause the page to refresh, so it can be achieved by changing the fragment in the URI. For example, clicking Tab1 will change the URI to http://www.example.com/example.html#tab1, and clicking Tab2 will change the URI to http://www.example.com/example.html#tab2.

Copy code The code is as follows:

function ShowTab1() {
$("# tab2").hide();
$("#tab1").show();
window.location.hash = "#tab1";
};
function ShowTab2() {
$("#tab1").hide();
$("#tab2").show();
window.location.hash = "#tab2";
};

Doing so has changed the URI, but whether it is through http://www.example.com/example.html#tab1 or http://www.example.com/example.html# The page accessed by tab2 displays the content of Tab1, so the content after # needs to be read when the page is loaded.

Copy code The code is as follows:

$(document).ready(ShowTab());
function ShowTab() {
if (window.location.hash == "#tab2")
ShowTab2();
else
ShowTab1();
}

In this way, functions such as refreshing and adding to favorites are already available, but forwarding and going back will still be troublesome. Although these two buttons have become available, the content of the web page has not changed when clicked. We need to use the onhashchange event of body. The onhashchange event is not supported by all browsers. If you want browsers that do not support this event to also detect changes in the content after #, you may need to write a function to regularly detect changes in window.location.hash or implement the onhashchange event yourself.
Sample code package download (Visual Studio 2010)