第一篇文章写了关于跨域最常用的三种方法，即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页面的前端设置
<script>
let ifr=document.createElement('iframe');
ifr.src='http://localhost:3001/a2.html#data';
document.body.appendChild(ifr);
ifr.style.display='none';
window.addEventListener('hashchange',e=>{
let data=location.hash.substring(1);
console.log(data)
})
</script>
- 异域a2.html页面的前端设置
<script>
switch(location.hash){
case '#data':
callback();
break;
}
function callback() {
let data = '数据数据数据'
try {
window.parent.location.hash = '#' + data;
}
catch(e){
let ifr = document.createElement('iframe');
ifr.src = 'http://localhost:3000/a3#' + data;
document.body.appendChild(ifr);
ifr.style.display='none';
}
}
</script>
- 同域a3.html的前端设置
<script>
window.parent.parent.hash=self.location.hash;
</script>
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前端设置
<iframe src="http://localhost:3001/b2" frameborder="0"></iframe>
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的前端设置
<iframe src="http://localhost:3001/c2" frameborder="0"></iframe>
<script>
window.onload=function(){
let targetOrigin='http://localhost:30001';
window.frames[0].postMessage('这是c1传给c2的数据',targetOrigin)
};
window.addEventListener('message',e=>{
console.log('c1已结接收到c2的数据'+e.data)
})
</script>
- c2.html的前端设置
<iframe src="http://localhost:3001/c2" frameborder="0"></iframe>
<script>
window.onload=function(){
let targetOrigin='http://localhost:3001';
window.frames[0].postMessage('这是c1传给c2的数据',targetOrigin)
};
window.addEventListener('message',e=>{
console.log('c1已结接收到c2的数据'+e.data)
})
</script>
网友评论