什么是跨域？如何请求跨域？（二）

第一篇文章写了关于跨域最常用的三种方法，即JSONP、cors、服务器代理，那么今天我们继续讲解另外三种根据iframe框架来实现的跨域请求方式。

location.hash

1.1问题描述

本地页面a1.html要访问异域a2.html的数据

1.2环境配置

a1.html 和 a3.html我们放在express中的app.js运行
地址分别为：http://localhost:3000/a1.html和http://localhost:3000/a3.html
a2.html 的代码，我放在http://localhost:3001/a2.html中

1.3原理

a1.html通过iframe跨域加载了a2.html的页面，如果a1有hash，那么a2获取数据，但是因为a1和a2不同源，且a2iframe是a1的子页面，所以a1无法从a2身上拿到任何数据；解决办法是，a2把数据通过hash和iframe传给a3；a3和a1同源，就可以把数据传给a1的hash了

• a1.html页面的前端设置

• 异域a2.html页面的前端设置

• 同域a3.html的前端设置

window.name

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

1.1问题描述

本地页面b1.html要访问异域b2.html的数据

1.2环境配置

b1.html 和 b3.html我们放在express中的app.js运行
地址分别为：http://localhost:3000/b1.html和http://localhost:3000/b3.html
b2.html 的代码，我放在http://localhost:3001/b2.html中

1.3原理

b1.html通过iframe框架加载一个b2.html页面，h2.html有window.name=data，但是因为是异域这个数据h1.html拿不到，所以让b2.html让iframe指向同域的b3.html，通过b3.html拿到数据

• b1.html前端设置

       
        let ifr=document.getElementsByTagName('iframe')[0];
        ifr.style.display='none';
        ifr.onload=function(){//加载b2
            ifr.src='http://localhost:3000/b3';
            ifr.onload=function(){//加载b3
                console.log(contentWindow.name)
            }
        }

• 异域b2.html前端设置

window.name='这是window.name请求跨域的数据' 

• 同域的b3.html页面不需要任何设置

postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

上面所说的向其他window对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个window对象。在讨论第二种方法的时候，我们说过，不同域的框架间是可以获取到对方的window对象的，而且也可以使用window.postMessage这个方法。

1.1问题描述

本地页面c1.html要访问异域c2.html的数据

1.2环境配置

c1.html的地址：http://localhost:3000/c1.html
c2.html 的地址，http://localhost:3001/c2.html

1.3原理

• 给iframe上的window调用postMessage（data，origin）
• 通过触发window上的message事件，来接受数据
• 通过parent.postMessage()继续发送数据
• 通过触发window上的message事件，来接受数据

• c1.html的前端设置

• c2.html的前端设置