window.onhashchange(监听 URL hash)

基本概念

在 URL 中 传值有两方式,一种是通过 search 来传值(即 ? 后面的部分),一种是通过 hash 来传值(即 # 后面的部分)。它们之间有一个区别, 即 search 改变时浏览器会发一次的 http request,而 hash 改变时浏览器不会发送 http request。也就是 说,search 可以用来做浏览器和服务器端的信息传递,而 hash 则更适合用于本地页面的信息传递(比如在主页面和“跨域” iframe 之间做信息传递,主页面通过改变 iframe.src 中的 hash 部分来“发送数据”, 而 iframe 则通过读取 window.location.hash 来“接收数据”。相反的,iframe 通过改 变 window.location.hash 来“发送数据”,主页面则通过读取 iframe.src 来“接收数据”)。了解了如何收发数据,那么 收发数据的时间点怎么匹配呢?就是说接收方如何知道发送方发送了数据呢?
 

监听方法

最 常用的方案是,数据接收方采用 setInterval 来定时检查,已达到监听的目的。当然,这种方式的弊端在于:如果时间间隔设置太长则不够即时,时 间太短则又牺牲页面性能。除了这个方案之外还有两种较常见的,一种是先改变 iframe 的 src 然后紧接着改变 iframe 的尺寸以触 发 iframe 中的 window.onresize事件(iframe 只要监听 window.onresize 就可以了,这种方法的优势在于 兼容所有浏览器,但缺点在于实现稍麻烦些且只能用于由 iframe 外向 iframe 内的单向传递,详细方法见《iframe 监听 location.href》),另一种则是“最大可能的使用”window.onhashchange 事 件来监听 hash 的改变(所谓“最大可能的使用“,是因为该事件并非所有版本浏览器都支持)。此外,window.onhashchange 事件还 有一个局限性,就是它只能用于在 iframe 内部 hash 的监听,对于主页面而言,仍然只能采用定时检查的方式(这一点和上一种方法相同)。

兼容性

posted @ 2013-10-25 09:53 sangxb 阅读(...) 评论(...) 编辑 收藏