JavaScript Window History

History Object

The JavaScript History object is used to record the access history of the browser. The History object is part of the window object and can be accessed through the window.history property.

Tip: The effective scope of the History object refers to the current window.

History object length attribute

The History object has a unique length attribute, which is used to get the number of URLs in the browser access history. The example is as follows:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
document.write(history.length);
</script>
</head>
<body>
</body>
</html>

Explanation

The output result of this example depends on the browsing history of the current page. If the example is opened in a new window, the IE browser will output 0 (That is, counting starts from 0), while browsers such as Firefox and Chrome will output 1.

back() method

back() method is used to return to the previous browsing page (if it exists), its effect is equivalent to clicking to browse the browser's back button or call history.go(-1). The following are commonly used tips for returning to the previous page:

<a href="javascript:window.history.back()" />Return to the previous page</a>

<html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>

forward() method

back() method is used to go to the next Navigate to the page (if one exists), which has the effect of clicking the browser's forward button or calling history.go(1). Example:

<a href="javascript:window.history.forward()" />Go to the next page</a>

<html>
<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()">
</body>
</html>

Note: The back method and the forward method require the browser to have a history record before they can be displayed.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> document.write(history.length); </script> </head> <body> </body> </html>

submit Reset Code

Automatic operation

JavaScript Window History

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]