Implement the browser forward/backward buttons Under Ajax.

This article from: http://hi.baidu.com/my534/blog/item/45c6bdcadf628a82c81768e3.html

Download an object As Ajax technology is so popular today, the question about how Ajax programs disrupt the browser's "forward/backward" has always plagued many Ajax beginners like a fly, when you go to Baidu or Google to search for relevant information, you will find that there are many articles discussing this issue, but most of them only give a solution or a long article of profound research, it is difficult to find an example of the actual solution, so I have the idea of writing this article and provide a small example to download. I hope it will help my colleagues who like Ajax technology! We wantTo solve the "forward/backward" problem of the browser in the Ajax program, it is basically to solve how to let the browser record the execution results of each client event.When Ajax technology is not as prosperous as it is now, no one will discuss how to let the browser record the results of every execution of client scripts such as JavaScript, which is precisely due to the rise of Ajax, the client scripting language like JavaScript is now playing an unprecedented role, attracting more technical staff to study it. Repeat it again,In Ajax, the browser's "forward/backward" problem is basically to solve how to let the browser record the execution results of each client eventBecause the results you obtained using Ajax, you still need to update the results to the page in pure client mode, what you want your browser to record is the last step in updating the results to the page. What happened before that, whether the results are obtained by Ajax is meaningless to us. Currently, there are two popular methods to achieve this function. One is to use a hidden IFRAME in the page to implement it, another method is to dynamically change the parameters in the URL so that the browser can record it. Because of the varying degrees of URL change records of various browsers, I personally feel that the first method is not as convenient as possible, this topic is not introduced for the moment. Now, let's get started. Now we want to implement an example that allows the browser to remember the execution results of each client event. Through the previous analysis, I believe you can easily apply this example to Ajax programs. Let's take a look at the results after the program runs! In the example in the previous article, we see that the changes to numbers after each click are accurately recorded by the browser, click the forward/backward button in the browser to view the number after each click. This article will detail the implementation principles. First of all, you must understand that the browser's "forward/backward" function is not "rigid" and only changes the URL of the current page. When IFRAME exists on the page, changing the IFRAME address will also be easily recorded by the browser. After we dynamically change the IFRAME address, when you click the "forward/backward" button on the browser, the IFRAME browsing history will be changed while the parent page remains unchanged! This is the key to recording the client operation results. As shown in the previous article, we added a hidden IFRAME to the page. While clicking the button to add a number, save the content of the current page in an array and regularly change the parameters in the link address in IFRAME, so that the browser can record the changes in the IFRAME link address, that is, the URL, this completes the process of recording operation history. When the user clicks the "forward/backward" button on the browser, the parent page is not sent, but the iframe url is changed. In the page linked to the IFRAME, every time you re-read the page, a javascript program will run. The function of the program calls a method of the parent page for recording history based on the parameters in the current URL, the function of the method is to return the corresponding historical page information in the array used to record page information based on the passed parameters in IFRAME. The general idea of this program implementation. The following code is explained in detail: Main JavaScript code in the parent page: Program code <SCRIPT> VaR h_list = new array (10); // declare an array used to store historical page information (up to 10 historical operations can be recorded) VaR h_index = 0; // The declaration is used to specify the pointer to the current browsing history. // Method for saving historical records Function savehistory () { If (document. getelementbyid ('hisstoryframework ')) { If (h_index = 9) { H_index = 0; } Else { H_index ++; } H_list [h_index] = Document. getelementbyid ("info"). innerhtml; Document.getelementbyid('hisstoryframe'{.src}'history.htm? '+ H_index; } } // Method for reading historical records Function gethisstory (curindex) { If (curindex! = H_index) { If (h_list [curindex]) { H_index = curindex; Document. getelementbyid ("info"). innerhtml = h_list [curindex]; } } } // Method for running after clicking a button, Function Test () { // Used to change the page information. You can change it to an Ajax operation. Document. getelementbyid ('info'). innerhtml = (parseint (document. getelementbyid ('info'). innerhtml) + 1 ); // History after successful operations Savehistory (); } </SCRIPT> The above is the main method used to implement the "forward/backward" function. Of course, do not forget to add the following program at the bottom of the parent page Program code <SCRIPT> H_list [0] = Document. getelementbyid ("info"). innerhtml; </SCRIPT> This program stores the page information when the page is opened to 0th in the array, in this way, the user can press the "back" button after the first click to return to the status of the first open page. The IFRAME hidden on the page must be declared as follows on the parent page: the program code <IFRAME id = "hisstoryframe" src = "history.htm? 0 "Height =" 0px "frameborder =" no "> </iframe> The height = "0px" frameborder = "no" attributes ensure that IFRAME is invisible on the page, while the src attribute is set to "history.htm? 0 ", note "? 0 "set the initial Page parameter to 0, so that you can "? "After the parameter read history, you can read the status when the initial Page is opened. Code in history.htm directed by iframeis simple: program code <SCRIPT> VaR url = Window. Location. href; If (URL. indexof ('? ')>-1) { Parent. gethisstory (URL. substr (URL. indexof ('? ') + 1 )); Document. Write (window. Location. Search. substr (1 )); } </SCRIPT> Only when you read the page each time according to "? Call the gethisstory method on the parent page to restore the corresponding historical page information in the array. This is the whole process of implementation of the function and code, speak more rough, but the code is very practical, my blog system (http://www.zj-blog.com/) a large number of Ajax to read information, however, you can still use the browser's "forward/backward" function. The principle behind it is the code in this example, if you read this article, you can download the example used in this article to study it. I hope that all the Ajax programs we will do in the future can implement the browser's "forward/backward" function! File Download