Javascript 使用“上一步”按钮还原到页面的上一个状态

Javascript 使用“上一步”按钮还原到页面的上一个状态,javascript,html,button,back,Javascript,Html,Button,Back,我正在为我的网站尝试一种新功能。我想通过隐藏/显示元素来进行简单的导航 例如,当用户单击某个产品上的“详细信息”按钮时,我想隐藏主,并显示包含该产品详细信息的 问题是,要返回到上一个“页面”,我必须撤消所有显示/可见性样式更改,如果用户单击新打开的中的“关闭”按钮,这是正常的。但大多数用户会点击后退按钮 是否有办法使“后退”按钮返回到页面的上一个“状态”,即撤消可见性/显示更改 谢谢。如果有,从用户体验的角度来看,这听起来是一件非常邪恶的事情。为什么不在应用程序中设计一个“后退”按钮,并使用de

我正在为我的网站尝试一种新功能。我想通过隐藏/显示
元素来进行简单的导航

例如,当用户单击某个产品上的“详细信息”按钮时,我想隐藏主
,并显示包含该产品详细信息的

问题是,要返回到上一个“页面”,我必须撤消所有显示/可见性样式更改,如果用户单击新打开的
中的“关闭”按钮,这是正常的。但大多数用户会点击后退按钮

是否有办法使“后退”按钮返回到页面的上一个“状态”,即撤消可见性/显示更改


谢谢。

如果有,从用户体验的角度来看,这听起来是一件非常邪恶的事情。为什么不在应用程序中设计一个“后退”按钮,并使用design让用户明白,他们应该使用应用程序的后退按钮而不是浏览器


所谓“使用设计”,我的意思是让你的应用程序看起来像浏览器内部的一个自给自足的用户界面,这样当用户在寻找与你的应用程序交互的控件时,他们的眼睛就停留在你的页面上,而不是在浏览器的chrome上。

是的。你要找的东西叫做


有一些开放式的实现,如,以及用于和等框架的插件/模块。

每当进行更改时,您需要向URL添加锚定

www.site.com/page.html#主播1

这将允许浏览器在其历史记录中维护页面。在完成本教程之后,我在当前网站上实现了它,它非常有效,让您能够很好地理解需要做什么:

注释中的示例不起作用,因为它是这样工作的:

  • 页面加载

  • 页面已更改,将锚定添加到URL(后退按钮将返回到1)

  • 页面更改,锚点更改(后退按钮将返回2)

  • 页面更改,锚点更改(后退按钮将返回3)

    。。。。等等等等


  • 你可以通过锚来实现这一点,这在很多flash应用程序中都是如此,或者在其他不从一页转到另一页的应用程序中也是如此。Facebook非常自由地使用这种技术。每次用户单击应该出现在其历史记录中的链接时,都要更改页面上的锚定

    假设我的主页链接是:

    http://www.mysite.com/#homepage
    
    对于使用javascript魔法的链接,请执行以下操作:

    <a href="#otherpage" onclick="javasriptMagic()">My Other Page</a>
    

    找出你应该在哪一页。

    回答你的标题问题(这就是我要找的)

    使用“上一步”按钮还原到页面的上一个状态

    从@reach4thelasers答案的链接中,您必须设置一个计时器,并反复检查当前锚:

    //On load page, init the timer which check if the there are anchor changes each 300 ms  
    $().ready(function(){  
       setInterval("checkAnchor()", 300);  
    });
    
    因为当按下
    BACK
    按钮时不会触发Javascript回调,只有锚被更改

    --


    顺便说一下,你所说的模式现在被称为

    看看基于ItsNat的Java web框架,它专注于单页界面网站

    当然,UI的设计是为了用户不必按下后退按钮。但是有些用户会因为旧习惯而这样做……但我没有点击任何链接,我只是将一个CSS样式的属性“可见性”从隐藏更改为可见。是的,但必须发生一些事情才能触发这些更改,对吗?这就是更改URL的时候。我这次尝试了,后退按钮变为acticve,但点击它不会“撤消”这个JS代码文档。getElementById('item2')。style.display='none';HTML5改进了这些点,请参见
    //On load page, init the timer which check if the there are anchor changes each 300 ms  
    $().ready(function(){  
       setInterval("checkAnchor()", 300);  
    });