离开页面并返回页面时，不会保留 JS 页面格式

JS page formatting is not retained when navigating away from a page and back

本文关键字：保留 格式 JS 返回 离开      更新时间：2023-09-26

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

下面是一个示例：

我对下拉列表中的表单有安全问题，如下所示：

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

当用户从下拉列表中选择[输入您自己的问题]时，我有一些jquery可以动画化CSS更改，将表单向下推，并使"自定义安全问题"的隐藏字段可见。选中后，窗体如下所示：https://i.stack.imgur.com/uVPKo.jpg

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

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

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

谢谢！

编辑：对不起，伙计们，我需要将图像重新上传到主机并重新发布。抱歉耽搁了。

基本上有四种机制可以在 Web 上保持状态：

  1. 基于浏览器 - 如果幸运的话，浏览器会将答案保存到表单字段中，并在看到具有相同名称的 INPUT 时重新显示它们;此外，某些浏览器会在向前<=>后导航之间保留一些状态
  2. 基于 cookie - 不言自明;您保存带有状态信息的 cookie，稍后检查以恢复状态
  3. 基于 URL - 导航到 URL 的不同哈希值，其中包含您想要的信息（例如。"？roll_down=真"）
  4. HTML5/本地存储 - 如果您有兴趣，请查找：-）
我们

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

Cookie

允许您保存更多信息（与Cookie持有的信息一样多，即大约4k）。 URL 允许的信息较少，但它们具有书签功能的额外好处;如果用户将 URL 保存为书签（或他们发送给朋友的链接或其他任何内容），则状态仍会保留。

因此，您可以选择上述内容，决定如何保持"我的表单已向下滚动"状态......然后是（我认为）你真正感兴趣的部分：当用户单击"返回"时，你如何检查这种状态并修复问题？

这部分我谦虚地听从另一个SO帖子，它已经回答了它：有没有办法在javascript中捕获后退按钮事件？

相关文章：