单击“后退”按钮后，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 link，然后在浏览器中按“后退”按钮，Chrome 并且 Edge 显示带有“第一锚点”的页面，而不是带有“第二锚点”的页面 - 作为在点击 Google.

之前

在 Firefox 中没问题。

如何使 Chrome 和 Edge 在返回后完全按照点击外部 link 之前的页面显示？

Answer 1

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

以下是火狐浏览器的测试结果：

如果我们讨论你的问题，如何让 Chrome 和 Edge 在返回后显示页面与点击外部 link 之前完全一样？

我建议您使用 localStorage 并在为 link 设置内部文本后设置其值。在脚本开始时，您可以从本地存储中获取值并设置内部文本。

修改示例：

<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浏览器中输出：

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

单击“后退”按钮后，Chrome 和 Edge 会忘记 HTML 块中的动态更改

After clicking on the “back” button, Chrome and Edge forgets dynamic changes in HTML blocks

javascript

google-chrome

microsoft-edge