ajax – Gmail如何使IE Back无需刷新?

前端之家收集整理的这篇文章主要介绍了ajax – Gmail如何使IE Back无需刷新?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当您点击邮件来区分页面(Ajax操作)时,Gmail使用#。
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如何发挥魔法?

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

首先要了解一些概念:

> javascript无法直接更改浏览器的历史记录。
>每当页面中的iframe的基本URL更改时,历史记录将被更新。 (但这有一些奇怪与不同的浏览器)。
> url有一个“哈希”部分:例如,在http://mail.google.com/mail#inBox的URL中,#inBox是散列的部分。让我们称之为“哈希”。所以http://mail.google.com/mail将是我们的“基本URL”。

GMail的跟踪历史主要是使用基于这个“哈希”的技巧。

那么,还有几个概念:

>当地址栏中的URL发生变化时,历史记录将被更新(之前的URL进入历史记录)
>当基本URL更改时,页面被重新加载。
>当URL的哈希部分改变而不改变基本URL时,页面不会被重新加载。

所以,当您从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 affected history”属性来实现历史。我知道这个说法缺乏细节,但这源于我自己缺乏IE的经验。

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

我在互联网上发现了许多链接,使用iframe /位置哈希来进行历史的正确实现。我没有耐心挖掘各种浏览器上的iframe界面之间的区别。

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

干杯!

猜你在找的Ajax相关文章