Gmail如何让IE Back工作而不刷新?

时间:2009-09-10 10:12:22

标签: ajax http gmail

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如何让魔术发生?

2 个答案:

答案 0 :(得分:13)

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

首先要了解一些概念:

  1. javascript无法直接更改浏览器历史记录。
  2. 每当页面中iframe的基本网址发生变化时,历史记录都会更新。 (但这有一些不同浏览器的怪癖)。
  3. 网址有“哈希”部分:例如,在网址http://mail.google.com/mail#inbox中,#inbox是哈希部分。让我们称之为“哈希”。因此http://mail.google.com/mail将是我们的“基本网址”。
  4. GMail跟踪历史记录主要使用基于此“哈希”的技巧来完成。

    所以,还有一些概念:

    1. 当地址栏中的网址发生变化时,历史记录会更新(之前的网址会进入历史记录)
    2. 更改基本URL时,将重新加载页面。
    3. 当URL的哈希部分发生更改而基本URL未更改时,页面不会重新加载。
    4. 因此,当您从http://mail.google.com/mail#inbox转到http://mail.google.com/mail#sent时,页面不会刷新

      现在,如果GMail在哈希值发生变化时收到事件通知,那么gmail可以根据它采取行动。不幸的是,没有任何DOM事件可以帮助我们捕获历史记录操作。所以相反(这是显示我如何克服问题的部分),我们运行一个无限循环来检查哈希的变化。如果它观察到更改,那么我们会检测到点击浏览器的“后退”或“前进”按钮。

      在解决这个问题时,我提出了一个方便的工具:URL parser。它可以解析URL中的GET参数,以及哈希中编码的参数。试试吧!

      干杯!


      关于IE中的这个问题:我没有意识到这个基于'哈希'的解决方案不适用于IE(可怜的旧Linux开发人员)。

      但是对于IE,您可以使用隐藏的iframe,并使用其“url affect history”属性来实现历史记录。我知道这个陈述缺乏细节,但这源于我自己缺乏IE的经验。

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

      我在互联网上找到了许多链接,使用iframes / location hash正确实现了历史记录。我没有耐心去挖掘各种浏览器上iframe接口之间的差异。

      我想我更喜欢jquery plugin。 YUI也有历史经理。

      干杯!

答案 1 :(得分:3)