javascript - 在我使用 javascript + 假超链接隐藏当前内容并显示新内容的页面上启用 "Back"

Question

我正在创建一个页面，我希望用户在其中单击链接，当他们单击该链接时，该页面的当前内容将被新内容替换(实际上不会留下相同的物理 HTML 页面)。

我使用以下 JavaScript 来执行此操作:

function ShowForm() {
    var ele = document.getElementById("Page1");
    ele.style.display = "none";
    var ele = document.getElementById("Page2");
    ele.style.display = "block";
}

HTML:

<div id="Page1">
    Fill out the following <a href="javascript:Showform();">form</a>.
</div>
<div id="Page2" style="display:hidden;">
    Form
</div>

这非常有效，只是因为它位于同一页面上，所以浏览器上的后退按钮不起作用。这会让用户感到困惑，因为他们不知道内容位于同一个 html 页面上。

有没有办法允许后退按钮在这种设置中工作，点击后退按钮会将他们带回 Page1 内容？

提前致谢!

Answer 1

您要做的不仅仅是通过更改哈希来更改历史堆栈，您还需要让您的应用程序知道按下的后退/前进按钮。有几种方法可以做到这一点。 window.onhashchange在大多数浏览器中都会触发，但没有完整的支持，因此不能单独依赖它。

更简单的方法是获取一个允许通过 AJAX 应用程序进行历史跟踪的插件。您可能没有使用 AJAX，但原理是相同的，您想要跟踪页面的状态并允许导航按钮遵循该流程。

尝试这些插件:
http://www.overset.com/2008/06/18/jquery-history-plugin/
http://github.com/tkyk/jquery-history-plugin