logo标签列表

Gmail如何让IE后退功能无需刷新就能正常工作？

ajaxhttpgmail
16
1
还有更多的人应该了解这种网页应用程序设计模式！ - jrharshath
2个回答
13
我可以回答这个问题，因为我遇到并解决了这个问题。
首先需要理解一些概念：
  1. JavaScript 无法直接更改浏览器历史记录。
  2. 每当页面中 iframe 的基本 URL 更改时，历史记录都会更新。（但不同的浏览器有一些怪异之处。）
  3. URL 有一个“哈希”部分：例如，在 URL http://mail.google.com/mail#inbox 中，#inbox 是哈希部分。我们称其为“哈希”。因此，http://mail.google.com/mail 将是我们的“基本 URL”。
GMail 通过基于这个“哈希”的技巧来跟踪历史记录。
所以，还有几个概念：
  1. 当地址栏中的 URL 更改时，历史记录会更新（上一个 URL 进入历史记录）。
  2. 当基本 URL 更改时，页面将重新加载。
  3. 当 URL 的哈希部分更改而基本 URL 不更改时，页面不会重新加载。
因此，当您从 http://mail.google.com/mail#inbox 转到 http://mail.google.com/mail#sent 时，页面不会刷新。
现在，如果GMail在哈希值改变时收到事件通知，那么它可以根据此采取行动。不幸的是，没有DOM事件可以帮助我们捕获历史记录操作。因此，我们使用一个无限循环来检查哈希值的更改（这是我克服问题的部分）。如果它观察到变化，那么我们就检测浏览器的“后退”或“前进”按钮的单击。
为了解决这个问题，我制作了一个方便的工具：URL解析器。它可以解析URL中的GET参数以及哈希中编码的参数。试一下演示吧！
干杯！
关于IE的问题：我没有意识到这个基于“哈希”的解决方案在IE上不起作用（可怜的老Linux开发者）。
但是对于IE，您可以使用隐藏的iframe，并使用其“url影响历史记录”属性来实现历史记录。我知道这个陈述缺乏细节，但这源于我自己对IE的经验不足。 我会尝试这个解决方案，并跟进:) 我在互联网上找到了一堆链接，使用iframes/location hash进行正确的历史记录实现。我没有耐心挖掘各种浏览器上iframe接口之间的区别。
我想我更喜欢jquery插件。 YUI也有一个历史管理器。
干杯！
+1 表示有趣的信息，但我不明白它与 IE 中的返回/前进特定问题有什么关系。 - Kamarey
谢谢您的回答。但是在IE上，如果URL是：1.[X.aspx] 2.[X.aspx#A] 3.[X.aspx#B] 然后按“返回”按钮：它会回到1 [X.aspx]并刷新页面，而不是2。我该如何让IE上的“返回”按钮跳转到2 [X.aspx＃A]，并且不刷新页面？就像Gmail一样。 - SirMoreno
好的，这是我没有完全研究过的一个领域。但是有一些提示可以帮到你。将它们添加到答案中... - jrharshath
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接