Javascript 单击“；背面”；按钮、Chrome和Edge会忘记HTML块中的动态更改_Javascript_Google Chrome_Microsoft Edge

Javascript 单击“；背面”；按钮、Chrome和Edge会忘记HTML块中的动态更改

javascript google-chrome

Javascript 单击“；背面”；按钮、Chrome和Edge会忘记HTML块中的动态更改,javascript,google-chrome,microsoft-edge,Javascript,Google Chrome,Microsoft Edge,简单测试代码： <html> <script> function changeAnchor() { document.getElementById('link').innerText = 'Second anchor'; return false; } </script> <body> <a href="" id="link" onClick=&

简单测试代码：

<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>


函数changeancher（）
{
document.getElementById（'link'）。innerText='Second-anchor'；
返回false；
}

如果在Google Chrome或Edge中我单击“第一个锚”，它将变为“第二个锚”。若之后我点击谷歌链接，并按下浏览器中的“后退”按钮，Chrome和Edge会显示带有“第一个锚”的页面，但不会像点击谷歌之前那个样显示带有“第二个锚”的页面

在Firefox中这没关系

如何让Chrome和Edge在返回页面后与单击外部链接前完全相同地显示页面？

您说过，上述代码在Firefox浏览器中的效果与预期一致。我在Firefox浏览器中测试了它，但它也显示了与Edge和Chrome浏览器类似的结果。不确定，它在你这边是如何工作的

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

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

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

修改示例：

<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>


演示




重置
var link_text=“”；
if（localStorage.getItem（“lnk\U txt”）！=“”）
{
document.getElementById（'link'）.innerText=localStorage.getItem（“lnk_txt”）；
}
函数changeancher（）
{
document.getElementById（'link'）。innerText='Second-anchor'；
link_text=“第二个锚点”；
setItem（“lnk_txt”，link_text）；
返回false；
}
函数重置（）
{
document.getElementById（'link'）。innerText='First-anchor'；
setItem（“lnk_txt”和“”）；
}

在边缘浏览器中输出：

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

Firefox可能正在缓存更改的DOM，因此“后退”按钮将加载最新的DOM，而不是原始页面。谢谢！它可以工作，但几乎没有修正-如果（localStorage.getItem（“lnk_txt”）！=“”）就不行了但是如果（localStorage.getItem（“lnk_txt”）！==null）如果您认为该建议可以帮助您解决问题，那么请接受该建议作为此问题的答案。请看。谢谢你的理解。