ajax - Gmail 如何使 IE Back 在不刷新的情况下工作？

Question

当您点击邮件时，Gmail 使用 # 来区分页面(+ Ajax 操作)。 http://mail.google.com/mail/#inbox/1238e709e37a1394

我发现: Google using # instead of search? in URL. Why?

在 FF 或 Chrome 中，您可以使用前进和后退而无需在这些网址之间刷新: http://X.com/MyPage.aspx#1 http://X.com/MyPage.aspx#2 http://X.com/MyPage.aspx#3

但在 IE 上，页面刷新并且在执行后退操作时不计算 # 之后的参数。

Gmail 如何让奇迹发生？

Answer 1

我可以给你这个问题的答案，因为我已经面对并解决了这个问题。

这里首先要理解几个概念:

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 在散列更改时收到事件通知，则 gmail 可以基于此采取行动。不幸的是，没有任何 DOM 事件可以帮助我们捕获历史操作。所以相反(这是展示我如何克服问题的部分)，我们运行一个无限循环来检查散列的变化。如果它观察到变化，那么我们就会检测到对浏览器“后退”或“前进”按钮的点击。

为了解决这个问题，我制作了一个方便的工具:URL parser .它可以解析 URL 中的 GET 参数，以及在 Hash 中编码的参数。试试演示吧!

干杯!

---

关于 IE 中的这个问题:我没有意识到这种基于“哈希”的解决方案在 IE 上不起作用(可怜的老式 linux 开发人员)。

但是对于IE，你可以使用一个隐藏的iframe，利用它的“url影响历史”属性来实现历史。我知道这个声明缺乏细节，但这源于我自己缺乏使用 IE 的经验。

我会尝试这个解决方案，并跟进:)

我在 Internet 上找到了大量链接，这些链接使用 iframe/location hash 正确实现了历史记录。没有耐心去深挖各个浏览器上iframe界面的差异。

我想我更喜欢 jquery plugin . YUI 也有一个历史管理器。

干杯!