History Object for HTMLDOM series tutorials

When browsing the Web page, we may have noticed this problem: when we click a link, the browser will take us to another new page. If we want to return, we usually click the back button on the browser, but we want to open the new page, then we can use the forward button to implement

When browsing the Web page, we may have noticed this problem: when we click a link, the browser will take us to another new page. If we want to return, we usually click the back button on the browser, but when we want to open the new page, we can use the forward button again.

In fact, we can also implement such a function in the web page. How can we implement it using Javascript? Here the History object of html dom is used. The History object contains the URL accessed by the user in the browser window,

The History object is part of the window object. We can access it through the window. history attribute. Let's take a look at its attributes and methods.

Attributes of the History Object

Length attribute: returns the number of URLs in the browser history list.

We can test it through the following small example:

12345678910111213141516

History Object in the html dom series-BeyondWeb.cn When the page is opened, the number of URLs is 1. Return to the home page through this page, and then click several more pages, Click the back button in the browser until the page is displayed. We can see that the number of URLs has increased. Back to homepage Document. write ("the number of URLs in the browser history list is:" + history. length); script

After running, we will find that when the page is opened, the number of URLs is 1, return to the home page through this page, and then click several more pages,
Click the back button in the browser until you return to the test page. We can see that the number of URLs has increased.

History Object Method

Back () method: load the previous URL in the History List

Forward () method: load the last URL in the History List

Go () method: load a specific page in the History list

Finally, let's use the Demo below to test it.