如何将history.pushState与浏览器的后退功能结合使用

Question

我使用history.pushState ，它的工作原理就像一个魅力，除了以下问题外，一旦您在铬或Firefox中按“ back”键对URL进行了正确的操作，URL就会更改，但是不会重新加载页面。

详细说明：

我们从mysite.tld开始

现在（在一些用户交互之后），我们使用history.pushState并将URL更改为mysite.tld/some/subpage 。 页面将相应地重新呈现。

现在，如果您单击“后退”，则URL会更改，但页面不会更改！ 如果刷新，页面将刷新。

我的幼稚（我是绝对的JavaScript noob）是这样添加一个eventListener：

dom.window.addEventListener("popstate",
  {
    (event: Event) =>
    {
      dom.window.location.reload()
    }
  })

但是，当然会有一些令人不愉快的副作用（每当url更改时，它都会重新加载页面。对于画廊或幻灯片放映非常不利）

Answer 1

pushstate功能使您可以在浏览器历史记录（URL，标题）中反映客户端应用程序的状态。

这是流程

用户更改应用程序的状态
该应用程序更改历史记录的状态
- 设置代表您的应用程序状态的数据（例如，显示的当前数据）
- 设置URL以反映您的应用程序状态
用户导航（更改状态），这会触发popstate事件
- 该事件包含state属性，该属性是您在推送状态时设置的数据
- 您根据状态更新应用程序的视图

看下面的例子（评论说明）：

popstate.html

<!DOCTYPE html>
<html>
<head>
    <title>Pushstate/Popstate</title>
</head>
<body>
    <a href="javascript: void(0)">increment</a>
    <div id="output">?</div>
    <script type="text/javascript">
        window.onload = function() {
            let identifier = 0,
                match,
                query,
                identifiererEl = document.getElementById("output");

            // - Since all URL properties can be accessed clientside, 
            //   the request data is extracted from the current URL.
            // - This can be seen like an ID that the server may use 
            //   to find the actual content
            // - Note that history.state makes no sense in this case, 
            //   since it is null when the script first runs.
            match = /identifier=(\d+)/.exec(location.search);

            // This emulates the behaviour of a server it won't make sense in 
            // a client side application
            if (match) {
                // Set the identifier with the data "from the server"
                identifier = Number(match[1]) || 0;
                // Make the view initially reflect the state
                render(identifier);
            }

            function render(text) {
                identifiererEl.textContent = text;
            }

            // Listen to user interaction to alter the data, render and 
            // push the state
            document.querySelector("a").addEventListener("click", (e) => {
                // Increment only for simplicity
                identifier++;

                render(identifier);

                history.pushState(
                    { identifier: identifier },
                    "",
                    `/popstate.html?identifier=${identifier}`
                );
            });

            // Listen to state changes to update the view
            window.addEventListener("popstate", (e) => {
                // Here you'd determine the actual data to render.
                // For simplicity the identifier itself is rendered.
                render(e.state.identifier);
            });
        };
    </script>
</body>
</html>

说到图库示例， identifier可以是照片ID， render()可以更新图像的来源。 当然，您负责获取所有或下一张/上一张照片（通过AJAX或内联到页面源代码中）。

如何将history.pushState与浏览器的后退功能结合使用

问题描述

1 个解决方案

解决方案1
1

如何将history.pushState与浏览器的后退功能结合使用

问题描述

1 个解决方案

解决方案1 1

解决方案1
1