Exploring Core BOM Objects for Navigation and Client Information
Tech
2
Location Interface
Direct access to the current document's address bar is provided through the window.location property. This interface exposes methods and attributes for reading protocol information, server addresses, and executing page redirects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location API Demo</title>
<script>
async function extractUrlData() {
console.log('Server Host:', window.location.host);
console.log('Domain Name:', window.location.hostname);
console.log('TCP Port:', window.location.port);
console.log('Full Resource URI:', window.location.href);
// Programmatically trigger navigation
window.location.replace('https://www.google.com');
}
</script>
</head>
<body>
<button id="btn-extract">Extract URL Details</button>
<script>
document.getElementById('btn-extract').addEventListener('click', extractUrlData);
</script>
</body>
</html>
History Interface
The browser session stack is managed via window.history. Developers can traverse past and future visited pages with out relying on native browser controls. This is particularly useful for custom navigation menus or single-page application routing simulations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>History API Demo</title>
<script>
function moveForwardInStack() {
window.history.forward();
}
function moveBackwardInStack() {
window.history.back();
}
function jumpByIndex(delta) {
window.history.go(delta);
}
function setupListeners() {
document.getElementById('nav-fwd').addEventListener('click', moveForwardInStack);
document.getElementById('nav-back').addEventListener('click', moveBackwardInStack);
document.getElementById('nav-jump').addEventListener('click', () => jumpByIndex(2));
}
window.addEventListener('DOMContentLoaded', setupListeners);
</script>
</head>
<body>
<a href="target-page.html" target="_self">Visit Target Page</a>
<div style="margin-top: 10px;">
<button id="nav-fwd">Go Forward</button>
<button id="nav-back">Go Back</button>
<button id="nav-jump">Jump +2 Entries</button>
</div>
</body>
</html>
Screen and Navigator Interfaces
While location and history handle navigation flow, screen and navigator provide metadata about the user's hardware display and software environment. These objects are essential for responsive layout adjustments, feature detection, and analytics tracking.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Client Metadata Demo</title>
<script>
function reportEnvironment() {
const displayMetrics = {
availableWidth: screen.availWidth,
availableHeight: screen.availHeight,
pixelDepth: screen.colorDepth
};
const clientDetails = {
userAgentString: navigator.userAgent,
platformName: navigator.platform,
languageCode: navigator.language
};
console.table(displayMetrics);
console.table(clientDetails);
}
</script>
</head>
<body onload="reportEnvironment()">
</body>
</html>
