我正在努力理解JavaScript中的popstate事件，为此我创建了这个简单的基于AJAX的导航网站。
这是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>
这是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>
这是脚本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;
});
}
}
我面临的问题详细如下：
我转到一个新的选项卡，打开文档
index.html。这是选项卡历史记录中的第一个条目。在此页面上，我单击指向
about.html的链接。结果，window.onclick处理程序被触发，并且最终，使用AJAX，文档about.html被动态显示。浏览器的标题以及URL(由于history.pushState()而发生这种情况(也会发生更改。现在我返回(使用浏览器的后退按钮(，URL变为
index.html，因此popstate事件在window上触发。在这里，我将index.html的内容重新加载到当前文档中，一切都很好。我回到谷歌浏览器主页(每个新标签的开始(。
现在，我继续前进。这将带我进入文档
index.html。浏览器上显示的是index.html的内容。所以在这一点上，一切都很好。我又向前走了。浏览器的URL将更改为
about.html及其标题。但是，这一次popstate事件不会触发。URL已更改为先前使用history.pushState()时设置的位置，因此我希望触发popstate事件。然而，事实并非如此。
popstate事件没有在最后一个前进步骤上启动的原因是什么
您的window.onpopstate = function(e) {块应该在window.onclick = function(e) {块之外。