Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM History length Property
The HTML DOM History length property returns the number of URLs in the browser's session history list for the current window. This includes all pages visited during the current browsing session, including the current page.
Syntax
Following is the syntax for the History length property −
history.length
Return Value
The history.length property returns an integer representing the total number of entries in the session history stack. This count includes −
The current page
All previously visited pages in the current tab/window session
Pages navigated to using browser back/forward buttons
Example − Basic History Length
Following example demonstrates how to get the history length of the current browser window −
<!DOCTYPE html>
<html>
<head>
<title>History Length Property</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1>History Length Property Example</h1>
<button onclick="getHistoryLength()" style="background-color: lightblue; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">
Get History Length
</button>
<div id="result" style="font-size: 24px; font-weight: bold; color: orange; margin-top: 20px;"></div>
<script>
function getHistoryLength() {
var historyLength = history.length;
document.getElementById("result").innerHTML = "History Length: " + historyLength;
}
</script>
</body>
</html>
The output displays a button that shows the current session history count when clicked −
History Length Property Example [Get History Length] History Length: 1 (or higher number based on browsing history)
Example − History Length with Navigation
Following example shows how the history length changes as you navigate between pages −
<!DOCTYPE html>
<html>
<head>
<title>History Length with Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>History Length Tracker</h2>
<p>Current History Length: <span id="lengthDisplay"></span></p>
<button onclick="showLength()" style="background-color: #4CAF50; color: white; padding: 8px 16px; border: none; border-radius: 4px; margin: 5px;">
Refresh Length
</button>
<button onclick="simulateNavigation()" style="background-color: #008CBA; color: white; padding: 8px 16px; border: none; border-radius: 4px; margin: 5px;">
Add to History
</button>
<div id="info" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0; border-radius: 4px;"></div>
<script>
function showLength() {
document.getElementById("lengthDisplay").innerHTML = history.length;
updateInfo();
}
function simulateNavigation() {
// Push a new state to history
history.pushState({page: Date.now()}, "New Page", "?page=" + Date.now());
showLength();
}
function updateInfo() {
var info = "Session started with " + history.length + " entries in browser history.";
document.getElementById("info").innerHTML = info;
}
// Show initial length when page loads
window.onload = function() {
showLength();
};
</script>
</body>
</html>
This example demonstrates how history.length increases when new entries are added to the browser's session history.
History Length Tracker Current History Length: 2 [Refresh Length] [Add to History] Session started with 2 entries in browser history.
Key Points
Important points to remember about the History length property −
Read-only − The
history.lengthproperty is read-only and cannot be modified directly.Session-based − It only counts entries from the current browsing session, not the entire browser history.
Minimum value − The minimum value is 1, representing the current page.
Tab-specific − Each browser tab maintains its own separate history length count.
Browser Compatibility
The history.length property is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the HTML specification since early versions and provides consistent behavior across different platforms.
Conclusion
The HTML DOM History length property provides a simple way to determine how many entries exist in the current session's browsing history. This property is useful for navigation-related functionality and understanding user browsing patterns within your web application.
178 Views
