启用“返回”在我使用 javascript 的页面上 +虚假超链接隐藏当前内容并显示新内容

发布于 2024-09-18 19:54:37 字数 687 浏览 3 评论 0原文

我正在创建一个页面，我希望用户单击链接，当他们单击该链接时，页面的当前内容将被新内容替换（实际上不会留下相同的物理 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 内容？

提前致谢！

原文

I'm creating a page where I want users to click on a link, and when they click on it, the current content of the page is replaced with new content (without actually leaving the same physical HTML page).

I'm doing this using the following 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>

This works great except that since it's on the same page, the back button on the browser doesn't work. This is confusing to users since they don't know that the content is on the same html page.

Is there a way to allow enable the back button to work in this kind of setup, where hitting the back button will take them back to the Page1 content?

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月下凄凉 2024-09-25 19:54:37

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

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

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

回复收藏 0 原文

痴梦一场 2024-09-25 19:54:37

如果您在更改内容时更改哈希值，则不会破坏浏览器的后退和前进功能：

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

    window.location.hash = 'page2';
}

当然，您需要付出更多努力才能使其正常工作，但这就是想法。

If you change the hash when you change your content, it won't break the browser's back and forward functionality:

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

    window.location.hash = 'page2';
}

Of course you'll need to put some more effort into this to make it work properly, but that's the idea.

回复收藏 0 原文