JavaScript 返回功能无法在两页深度工作

Question

我使用以下 JavaScript 代码在我的移动应用程序中分配一个后退按钮:

//Add back button code onclick
            $("#backLocation").replaceWith("<a href=\"#\"  ><img id=\"backClick\" style=\"vertical-align: middle;\" src=\"img/back.png\" height=\"30\" width=\"30\"> </a>");

            $(document).on('click', "#backClick", function (e) {
                //go back a page
                e = e || window.event;
                e.preventDefault();
                window.history.back();
            });

如果您的深度只有一页，那么该代码效果很好。但是，如果您深入两页并使用此 onClick 返回原始页面，则会遇到一些问题。

例如:

第 1 页 -> 第 2 页:如果您在页面上使用上述 javascript，您将返回到第一页。完全按照其应有的方式工作。

Page1 -> Page2 -> Page3:这就是事情变得奇怪的地方。如果您在第三页并单击我的按钮来执行上面的 javascript，它将完美地带您回到第二页。在第 2 页上，如果您尝试返回第 1 页，则代码在第一次单击时不起作用，但在第二次单击时，它将带您返回第 1 页。

更新:

我发现我的奇怪行为是从哪里来的。要进入 Page2->Page3，您需要在进入 Page3 之前单击弹出窗口的链接。弹出按钮使用 href="#"启动弹出窗口，因此在转到第 3 页之前添加 .html#。

当我们返回到 Page2 时，我们实际上位于 Page2#，单击返回会将我们带到 Page2，这就是为什么我们需要单击两次才能返回到 Page1。

关于如何解决这个问题有什么想法吗？我尝试使 href=""不带井号，但这只是使弹出窗口不起作用。

Answer 1

window.history.back()不接受参数，如果你想返回不止一页，你需要window.history.go(-2)。MDN 网站上有详细的解释，这里是: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history