526互联

popState api详解 history.pushState 案例

发布时间 2023-04-14 09:26:08作者: 青幽草

popState API是HTML5引入的一种浏览器历史记录相关的API。它提供了一种监听浏览器历史栈发生变化的途径，当用户通过前进/后退按钮或者其他方式改变了当前的历史状态时，该API就会触发相应的事件，开发者可以在事件处理函数中通过获取到的历史状态数据做出相应的响应。

在使用popState API时，开发者需要使用window对象的addEventListener()方法监听popstate事件，当popstate事件触发时，浏览器会传递一个popstate事件对象，其中携带了触发事件时的历史状态数据。

开发者可以通过pushState()方法或者replaceState()方法改变浏览器当前的历史状态，这些操作不会触发popstate事件，只有当用户通过前进/后退按钮或者其他方式改变了当前的历史状态时才会触发该事件。

总的来说，popState API为我们提供了一种在前端动态地响应浏览器历史记录变化的方式，可以为开发者带来更好的用户体验和编程灵活性。

以下是一个使用history.pushState()实现前端“单页面应用”的简单案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Push State Example</title>
    <script>
        // 监听页面的 load 事件，然后通过 pushState() 修改 URL
        window.addEventListener('load', function() {
            history.pushState({
                page: 'home'
            }, 'Home', '/');
        });

        // 监听“点击链接”事件，然后使用 pushState() 修改 URL，并通过 AJAX 获取并渲染新内容
        document.addEventListener('click', function(event) {
            // 点击的是内部链接
            if (event.target.tagName === 'A') {
                event.preventDefault();  // 阻止默认跳转事件
                var url = event.target.getAttribute('href');
                var title = event.target.textContent;

                // 使用 pushState() 修改 URL
                history.pushState({
                    page: url.split('/').pop()  // 使用 URL 最后一部分作为状态数据
                }, title, url);

                // 异步获取并渲染新内容
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url);
                xhr.onload = function() {
                    document.getElementById('content').innerHTML = xhr.responseText;
                };
                xhr.send();
            }
        });

        // 监听 popstate 事件，然后使用 AJAX 获取并渲染历史记录对应的内容
        window.addEventListener('popstate', function(event) {
            // 如果历史记录中有状态数据，并且其中包含页面的标识符
            if (event.state && event.state.page) {
                var url = '/' + event.state.page;  // 根据状态数据拼接出 URL
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url);
                xhr.onload = function() {
                    document.getElementById('content').innerHTML = xhr.responseText;
                };
                xhr.send();
            }
        });
    </script>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
    <div id="content">
        <h1>Home Page</h1>
    </div>
</body>
</html>
View Code

在这个例子中，我们使用了history.pushState()方法来修改URL，从而实现单页面应用的效果。当点击导航栏中的链接时，我们阻止默认的跳转事件（即页面刷新），然后通过pushState()方法修改URL，使用异步请求获取新的内容并渲染到页面上。在前进后退时，我们监听了popstate事件，并在事件处理函数中根据历史记录中保存的状态数据使用异步请求获取并渲染历史对应的内容。