单击“返回”按钮后，Chrome 和 Edge 会忘记 HTML 块中的动态变化

Question

简单的测试代码：

<html>
<script>
    function changeAnchor()
    {
        document.getElementById('link').innerText = 'Second anchor';
        return false;
    }
</script>
<body>

<a href="" id="link" onClick="return changeAnchor();">First anchor</a><br>
<a href="https://google.com">Google</a>

</body>
</html>

如果在 Google Chrome 或 Edge 中单击“第一个锚点”，它会变为“第二个锚点”。 如果之后我点击 Google 链接，然后在浏览器中按“返回”按钮，Chrome 和 Edge 会显示带有“第一个锚点”的页面，而不是“第二个锚点”的页面 - 就像点击 Google 之前一样。

在 Firefox 中没问题。

如何让 Chrome 和 Edge 在返回后完全按照点击外部链接之前的状态显示页面？

Answer 1

您说上述代码在 Firefox 浏览器中按预期工作。 我在 Firefox 浏览器中对其进行了测试，但它也显示了与 Edge 和 Chrome 浏览器相似的结果。 不确定，它是如何在你身边工作的。

以下是使用 Firefox 浏览器的测试结果：

如果我们谈论您的问题，如何让 Chrome 和 Edge 在返回后完全按照点击外部链接之前的状态显示页面？

我建议您在设置链接的内部文本后使用localStorage并设置其值。 在脚本启动时，您可以从本地存储中获取值并设置内部文本。

修改示例：

<html>
<head>
    <title>demo</title>
</head>
<body>
    <a href="" id="link" onClick="return changeAnchor();">First anchor</a><br>
    <a href="http://localhost">Localhost</a><br>
    <button id="btn1" onclick="reset()">Reset</button>

    <script>
        var link_text = "";
        if (localStorage.getItem("lnk_txt") !== "")
        {
            document.getElementById('link').innerText = localStorage.getItem("lnk_txt");
        }
        function changeAnchor()
        {
            document.getElementById('link').innerText = 'Second anchor';
            link_text="Second anchor";
            localStorage.setItem("lnk_txt", link_text);
            return false;
        }
        function reset()
        {
            document.getElementById('link').innerText = 'First anchor';
            localStorage.setItem("lnk_txt", "");
        }
    </script>
</body>
</html>

Edge 浏览器中的 Output：

该解决方案适用于所有主流浏览器。

单击“返回”按钮后，Chrome 和 Edge 会忘记 HTML 块中的动态变化

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-08 03:21:27

单击“返回”按钮后，Chrome 和 Edge 会忘记 HTML 块中的动态变化

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-08 03:21:27

解决方案1
1 已采纳 2021-03-08 03:21:27