【问题标题】:JS page formatting is not retained when navigating away from a page and back离开页面并返回时不保留 JS 页面格式
【发布时间】:2012-06-05 17:08:18
【问题描述】:

当我离开时,页面格式有点问题,然后点击浏览器返回页面。

这是一个例子:

我在下拉列表中的表单上有安全问题,如下所示:

http://i.stack.imgur.com/ib32z.jpg

当用户从下拉列表中选择 [Type in your own question] 时,我有一些 jquery 可以动画化 CSS 更改,将表单向下推,并使“自定义安全问题”的隐藏字段可见。选中后,表单如下所示: http://i.stack.imgur.com/uVPKo.jpg

现在我的困境是当我离开这个页面,然后使用浏览器的后退按钮返回时,我的格式被搞砸了,看起来像这样:

http://i.stack.imgur.com/5Xhpi.jpg

我编写的 javascript 不会在后退按钮上再次触发,因此浏览器不知道将表单向下移动以适应间距的变化。无论如何我可以强制 document.ready 重新加载或清除某种缓存吗?

谢谢!

编辑:对不起,我需要将图像重新上传到主机并重新发布。抱歉耽搁了。

【问题讨论】:

  • 只有看到您的代码,我们才能提供帮助。

标签: javascript jquery .net html css


【解决方案1】:

基本上有四种机制可以在网络上保持状态:

  1. 基于浏览器 - 如果幸运的话,浏览器会将答案保存到表单字段并在看到同名的 INPUT 时重新显示它们;此外,一些浏览器会在前进后退导航之间保留一些状态
  2. 基于 Cookie - 非常不言自明;你保存一个带有状态信息的 cookie,然后检查它以恢复状态
  3. 基于 URL - 导航到 URL 的不同哈希值,其中包含您想要的信息(例如“?roll_down=true”)
  4. HTML5/本地存储 - 如果您有兴趣,请查看 :-)

我们基本上可以抛弃 1 和 4,因为它们都过于依赖浏览器的行为/支持,我们不能可靠地依赖所有浏览器来按照我们想要的方式处理它们。剩下 #2 或 #3。

Cookie 允许您保存更多信息(与 Cookie 保存的信息一样多,即大约 4k)。 URL 允许的信息较少,但它们具有书签功能的额外好处;如果用户将 URL 保存为书签(或作为他们发送给朋友的链接等),该状态仍会保留。

因此,选择上述选项,决定如何保持“我的表单已滚动”状态......然后是(我认为)您真正感兴趣的部分:您如何检查当用户点击“返回”时,这个状态并解决问题?

这部分我谦虚地推迟到另一个 SO 帖子,它已经回答了它: Is there a way to catch the back button event in javascript?

【讨论】:

    猜你喜欢
    • 2013-06-13
    • 1970-01-01
    • 1970-01-01
    • 2015-06-12
    • 2014-01-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多