I am trying to understand the popstate event in JavaScript and for that I created this simple AJAX-based navigation website.
Here's home.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
<header>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</header>
<div id="main">
<h1>Home Page</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus eligendi suscipit aliquid. Mollitia ratione impedit ab, dicta reprehenderit veniam nam facere ipsam vel minus doloribus officia, odit dolorum alias error.</p>
</div>
<script src="nav.js"></script>
</body>
</html>
Here's about.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Us</title>
</head>
<body>
<header>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</header>
<div id="main">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto placeat ipsam nam nobis exercitationem voluptatibus, officia impedit. Dolore, esse dignissimos enim porro aspernatur sit aperiam asperiores, maiores, hic velit quod.</p>
</div>
<script src="nav.js"></script>
</body>
</html>
And here's the script nav.js:
// implementing ajax-based navigation
var main = document.getElementById('main');
function makeRequest(url, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'document';
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
callback(this);
}
}
xhr.send();
}
window.onclick = function(e) {
if (e.target.href != window.location.href) {
history.pushState(null, '', e.target.href);
}
makeRequest(e.target.href, function(xhr) {
document.title = xhr.responseXML.title;
main.innerHTML = xhr.responseXML.getElementById('main').innerHTML;
});
e.preventDefault();
window.onpopstate = function(e) {
console.log('The popstate event has fired')
makeRequest(window.location.href, function(xhr) {
main.innerHTML = xhr.responseXML.getElementById('main').innerHTML;
});
}
}
The problem I am facing is detailed as follows:
I go to a new tab and open up the document
index.html. This is the first entry in the tab's history.On this page, I click the link pointing to
about.html. As a result, thewindow.onclickhandler gets fired and ultimately, using AJAX, the documentabout.htmlgets dynamically displayed. The browser's title also gets changed, as well as the URL (which happens due tohistory.pushState()).Now I go back (using the back button of the browser), the URL changes to
index.html, and consequently thepopstateevent fires onwindow. Here, I reload the contents ofindex.htmlinto the current document and everything works fine.I go back, which takes me to the home page of Google Chrome (the start of every new tab).
Now, I go forward. This takes me to the document
index.html. What is displayed on the browser are the contents ofindex.html. So uptil this point, everything is working fine.I go forward again. The browser's URL changes to
about.htmland its title as well. However, this time, thepopstateevent doesn't fire. The URL has changed to a location which was set earlier on usinghistory.pushState()so I expect thepopstateevent to fire. However, it doesn't.
What is the reason for the popstate event not firing on the last forward step?
Your
window.onpopstate = function(e) {block should be outside thewindow.onclick = function(e) {block.