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也有一个历史经理。
干杯!