不采用interval方式模仿onHashChange

前些天有一个类似的需求，网上找了很久基本上都是用定时器检测location.hash有没有变化，但总觉的这样做不太合适。无意间发现了一篇《Emulating onhashchange without setInterval》，大概翻一下，如果有类似需求的同学们可以参考下。

E文好的直接看这里： http://www.zachleat.com/web/2008/08/21/onhashchange-without-setinterval/

JS好的直接看这里：http://www.zachleat.com/Projects/history/

by Zach Leatherman

所有主流支持javascript的浏览器都有一个限制，当你改变 location.hash 的时候，你如何通知到浏览器，并让它把访问历史记录下来？当然，你可以在改变 location.hash 的时候主动的触发，但如果用户点击了前进/后退的按钮的情况下呢？

YUI’s History component 和 Really Simple History 都采用了 setInterval 的方式，定时比较地址，当改变的时候触发。但这并不是最好解决方案，作为正统的前台工程师，我们应该尽可能的避免定时器的循环。IE8将支持onhashchange 事件，以便客户端可以捕获，这点自然很好，但是，确切的说，我们已经有了不需要用定时器的跨浏览器的结决方案。

不需要用定时器的跨浏览器的结决方案，具体实现如下：

1.页面初始化时，我们加载一个绝对定位的iframe到页面里，并将其位置设到 -500px, -500px，使用户无法看到。再框架页内，我们用兼容写法添加 onscroll 事件，并使其能够获取到滚动到的位置。我的例子中是由jQuery和dimensions插件来完成的，用其他的库或者直接写也很容易实现的；

2.为了让浏览器记录下hash改变的历史，我们首先要将一个 <a name="hashString">hashString</a> 节点添加到iframe的body节点中，并设置a的css样式，使其比例增大到与iframe的高度，保证切换锚点时会触发onscroll事件；

3.然后，我们改变iframe的hash，指向相应的a锚点，iframe会滚动到对应的内容，同时浏览器也会在历史记录中记下相应的记录。

4.同时，iframe页内，也会触发之前准备好的onscroll事件（IE下有个特例，浏览器已经记录历史，但是读取hash值的时候发现并没有改变，相应的，我们可以比较<a>与scrollY/pageOffsetY属性的方式来代替）；

这种方法有个好处，你再也不需要自己维护历史了，它将很多繁杂的工作都替你做了，它甚至可以维护页面上其他iframe的历史。

优点：