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 的监听，对于主页面而言，仍然只能采用定时检查的方式（这一点和上一种方法相同）。

兼容性

转载于:https://www.cnblogs.com/fly-allblue/p/3387334.html