iframe跨域解决方案

今天在逛头条的时候看到一位职业代码人写的iframe跨域解决方案文章，觉得很不错，值得收藏，于是复制过来记录以便查阅。

在业务中你可能会遇到这样一个场景：自己开发的页面中需要通过iframe嵌入别人的页面，比如passport页面（登录），但是常常因为跨域问题，导致父子页面无法通信，这时我们就要想办法如何在跨域的情况下解决这个问题。

什么是跨域？

协议、域名、端口三者中只要有一个不一样就是跨域！

假设我们有以下场景：

父页面a通过iframe内嵌子页面b，两页面之间想互相获取dom等信息，该怎么办？

a页面地址：http://jerry.demo.com:8999/a.html

b页面地址：http://channel.demo.com:9999/b.html

iframe跨域解决方案

iframe跨域解决方案

iframe跨域解决方案

如果父子页面直接操作对方，就会产生图3中的跨域报错！

document.domain

如果只是主域名不同，其他都相同，就可以采用这种方式。比如以上场景的情况，可以设置

document.domain = 'demo.com';

location.hash

利用页面url的hash值解决。

a父页面可以将信息放到子页面url的hash值中，然后在子页面的内部监听hash值的变化。

iframe跨域解决方案

这种实现方式可以让子页面拿到父页面的信息，但是如何让父页面拿到子页面的信息呢？

b页面改变a页面地址hash值，a页面监听地址栏的变化获取相应的数据，但是a、b页面不同源，b页面不能直接操作改变a页面地址的hash值。

于是b可以通过创建c页面（图6所示），让c和a同源，把值传给c，c来改变a的地址hash（图7所示），从而达到a、b的通信。

iframe跨域解决方案

iframe跨域解决方案

iframe跨域解决方案

window.name

window.name是个特殊的值，无论是iframe内嵌的页面还是普通的页面都存在这个变量。它有一个神器的特点就是只要设置了这个值之后无论如何修改页面的地址（哪怕是跨域的地址），这个值都会一直存在。（跟着页面窗口存在而不是跟着地址存在）

父到子通信：

iframe跨域解决方案

在a页面中先插入c，a和c同源，所以可以先在a页面中操作c页面的window.name，然后再把iframe的src指向b页面，b和c处于一个iframe窗口，这时window.name的值就可以在b页面中获取到！

子到父通信：

iframe跨域解决方案

过程正好反过来，先插入b，b页面中修改window.name，然后再把iframe页面替换成c，因为a和c同源，所以a页面就能拿到window.name的值。

此处比较尴尬的是需要隐藏iframe。

window.postMessage

HTML5引入了跨文档通信 API，使用 targetWidw.postMessage 发送消息，window.onmessage 监听接收消息。

iframe跨域解决方案

iframe跨域解决方案

使用时，这个API的兼容性需要考虑一下。

iframe跨域解决方案