内容提要
iframe 可以实现同域和跨域通信,结合 jsonp 有多种应用。重要原则包括同域窗口互操作和通过监听 resize 事件及 hashtag 变化进行跨域操作。示例代码展示了如何通过 iframe 进行跨域数据传递。
延伸解读
跨域通信的核心原则
文章指出,iframe跨域通信依赖于几条关键原则:当前层级中的任何Window都可以获取其他Window;只有同域Window才能互相操作;但任何Window都可以设置其他Window的location,即使不同域;改变URL的hashtag不会导致页面刷新。这些原则是后续所有跨域技巧的基础,理解它们有助于避免常见的权限错误。
hashtag轮询与resize监听
通过不断检测hashtag变化可以实现跨域数据传递,但轮询方式效率较低。文章提出利用iframe可设置其他iframe大小的特性,结合resize事件监听,实现更优雅的跨域通信:主页面将消息附加到hashtag并改变隐藏iframe的尺寸,该iframe监听到resize后捕获hashtag数据,再进行处理或传递。
iframe与ajax的跨域能力对比
文章强调,iframe在跨域通信中比ajax更强大,因为ajax无法跨协议(如file/http),而iframe可以。示例中通过iframe实现了跨协议查单词功能,展示了iframe在复杂跨域场景下的优势。这提醒开发者在ajax受限时,可考虑iframe方案。
Q&A
iframe 如何实现跨域通信?
iframe 可以通过改变 URL 的 hashtag 和监听 resize 事件来实现跨域通信。
为什么 iframe 在跨域通信中比 ajax 更强大?
因为 ajax 无法跨协议,而 iframe 可以实现同域和跨域通信,甚至跨协议通信。
如何通过 hashtag 变化进行跨域数据传递?
可以在 iframe 和主页中检测 hashtag 的变化,一旦变化就进行相应的数据处理。
使用 iframe 进行跨域通信时需要注意哪些原则?
需要记住同域窗口互操作、不同域窗口可以设置其他窗口的 location,以及改变 hashtag 不会刷新页面等原则。
如何优化 iframe 的跨域操作?
可以通过设置 iframe 的大小和监听 resize 事件来优化跨域操作。
iframe 的哪些特性使其适合跨域通信?
iframe 可以设置其他 iframe 的大小,并且能够监听 resize 事件,这些特性使其适合跨域通信。