iframe 监听 location.href

问题描述

 

我们常需要通过改变 iframe.src 的 hash 部分来向跨域 iframe 中传递信息（原理是主页面有权限操作 iframe.src，而 iframe 中的 window.location.href 会始终和 iframe.src 保持相同），而信息传递是一方面，iframe 内信息的及时获取又是另一个问题。本文将介绍一种可即时接收数据的并兼容所有浏览器的方案。

 

方案描述

 

当改变 iframe.src 的 hash 部分后立即改变 iframe 的尺寸，从而触发 iframe 内部的 window.onresize 事件，而 iframe 内部则通过监听 window.onresize 事件便可以即时感知信息的到达。

 

注意事项

 

● 如果要隐藏 iframe，则应使用 visibility:hidden 而非 display:none；

● iframe 的尺寸需设置的大一些（建议不小于100px），否则其尺寸的改变在 IE6、7 下不会除非 iframe的 window.onload 事件；

● 改变可视 iframe 的大小会影响用户体验，因此可以再加一个隐藏 iframe（该 iframe 与目标 iframe 同域），通过这个隐藏 iframe 来接收数据并向目标 iframe 传递数据。

● 通过改变 iframe.src 的 hash 部分来向跨域 iframe 中传递信息的方法在 Chrome 中是存在缺陷的，因为即便只是 hash 部分的改变也会引起 Chrome loading 图标的转动（无 HTTP request，只是 loading 图标会转动一下）。所以对于 Chrome 浏览器（其实最好是除了 IE6、7 外的所有浏览器）建议使用 postMessage 来实现信息传递（除了 IE6、7 外的所有主流浏览器都支持，详细请看《window.postMessage》）。