为什么 popstate 事件不触发？

Question

我试图了解 JavaScript 中的 popstate 事件，为此我创建了这个简单的 AJAX-based 导航网站。

这里是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 的 link。结果，window.onclick 处理程序被触发，最终，使用 AJAX，文档 about.html 被动态显示。浏览器的标题也会更改，URL（由于 history.pushState() 而发生）。
现在我返回（使用浏览器的后退按钮），URL 更改为 index.html，因此 popstate 事件在 window。在这里，我将 index.html 的内容重新加载到当前文档中，一切正常。
我返回，这将我带到 Google Chrome 的主页（每个新标签页的开始）。
现在，我往前走。这会将我带到文档 index.html。浏览器显示的是index.html的内容。所以到目前为止，一切正常。
我再往前走。浏览器的 URL 更改为 about.html 及其标题。然而，这一次，popstate 事件没有触发。 URL 已更改为之前使用 history.pushState() 设置的位置，因此我希望触发 popstate 事件。然而，事实并非如此。

popstate 事件在最后一步没有触发的原因是什么？

Answer 1

您的 window.onpopstate = function(e) { 区块应该在 window.onclick = function(e) { 区块之外。

为什么 popstate 事件不触发？

Why does the popstate event not fire?

html

javascript

html5-history

popstate