前言
工作中,有些系统是利用的iframe。有一次突然遇到了一个令人费解的跨域报错,没有发请求,却报了“Error:Blocked a frame with origin...from accessing a cross-origin frame”的跨域错误的问题,当时自己一脸懵(恕我无知)……原来是因为自己的一句window.parent.document.scrollTop,万万想不到,iframe之间的通信也会存在跨域问题,赶紧去研究一下。
一.iframe跨域
其实前言的本质,就是因为父、子窗口这两个页面不同源,但是却想在iframe中获取父窗口的dom,造成了跨域问题。
若非同源,会受到三种跨域限制:一是ajax请求限制;二是DOM无法获得;三是Cookie、LocalStorage 和 IndexDB 无法读取。
本文主要讲第二点,不满足同源策略的两个网页是无法拿到对方的DOM的。
这里需要特别说明的是:阮一峰老师在文章 浏览器同源政策及其规避方法里说到父窗口想获取子窗口的DOM,因为跨源导致报错。
但是经我这边用chrome操作,并没有报错,是可以获取到dom的,我大胆猜想可能是chrome更新了安全策略吧。
举个栗子:
<!-- 父窗口http://172.18.12.109:8080/#/Parent,里面分别嵌了同源和跨域两个子窗口-->
<template>
<div class="">
<div>父窗口</div>
<iframe src="http://172.18.12.109:8080/#/Child_Same" id="iframe1"></iframe>
<iframe src="http://172.18.12.109:8082/#/Child_Diff" id="iframe2"></iframe>
</div>
</template>
<script>
export default {
name: 'Parent',
data () {
return {
}
},
mounted( ) {
console.log('document.getElementById("iframe1").contentWindow.document',document.getElementById("iframe1").contentWindow.document);
console.log('document.getElementById("iframe2").contentWindow.document',document.getElementById("iframe2").contentWindow.document);
}
}
</script>
<!-- 同源子窗口http://172.18.12.109:8080/#/Child_Same-->
<template>
<div class="">
<div>同源子窗口</div>
</div>
</template>
<script>
export default {
name: 'Child_Same',
data () {
return {
}
},
mounted() {
console.log('同源 window.parent.document',window.parent.document);
}
}
</script>
<!-- 跨域子窗口http://172.18.12.109:8081/#/Child_Diff-->
<template>
<div class="">
<div>跨域子窗口</div>
</div>
</template>
<script>
export default {
name: 'Child_Diff',
data () {
return {
}
},
mounted() {
console.log('跨域 window.parent.document',window.parent.document);
}
}
</script>
父窗口获取子窗口的DOM在同源和跨域下都可以获取;而子窗口获取父窗口的DOM在跨域时会报错,同源可以获取到。
二.解决方法
targetWindow.postMessage(data,targetOrigin,transfer)
这是跨窗口发送消息的方法。
逐一解释一下参数:
targetWindow: 窗口的引用。可以是当前窗口window,也可以是一个窗口获得的其它窗口的引用,可以为:
- Window.parent
- HTMLIFrameElement.contentWindow
- Window.open
- Window.opener
- Window.frames +索引值
data: 传递的消息
targetOrigin:接收消息的目标窗口的源(协议 + 域名 + 端口)。可以设为*,表示不限域名,可向所有窗口发送。
transfer : 可选参数
好的,那么如何接收发来的消息呢?
目标窗口对message事件进行监听,即可获得发送过来的消息
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
// For Chrome, the origin property is in the event.originalEvent
// object.
// 这里不准确,chrome没有这个属性
// var origin = event.origin || event.originalEvent.origin;
var origin = event.origin
if (origin !== "http://example.org:8080")
return;
// ...
}
所以前言子获取父窗口dom的问题可以这样解决:
//父窗口向iframe发消息
document.getElementById("iframe").contentWindow.postMessage({scrollTop:document.body.scrollTop},'http://172.18.12.109:8082');
//iframe接收消息
window.addEventListener('message', (e)=>{
let origin = event.origin || event.originalEvent.origin;
if (origin !== 'http://172.18.12.109:8080') {
return;
}else {
console.log(e.data);
//{scrollTop: 0}
}
},false);
再举一个工作中遇到的栗子:
在iframe中不同源的子窗口页面间实现跳转
具体如下:
有一个系统,是由提供了整个页面导航栏的父窗口A和iframe嵌入的不同源的子窗口组成的。不同一级导航对应不同模块,同一模块下可以通过路由进行页面跳转,而不同模块只能通过url跳转。
现在要实现点击模块B中的一个按钮从B跳转到模块C的一个页面,但是不能新开窗口跳转,还是要在父窗口里,因为要外部导航栏始终不变,只是内部页面跳转。
因此这里需要用到在子窗口B和父窗口A通信,然后在A中打开C这个窗口。
与前言同样的,此处为父向子发送消息,子窗口接收消息。
示例代码如下:
<!-- 父窗口http://172.18.12.109:8080/#/Parent-->
<template>
<div class="">
<div>外部父窗口</div>
<!-- 跨域 -->
<iframe src="http://172.18.12.109:8081/#/Child_Diff1" id="iframe1"></iframe>
</div>
</template>
<script>
export default {
name: 'Parent',
data () {
return {
}
},
mounted( ) {
//目标父窗口接收子窗口发送的消息
window.addEventListener('message', (e)=>{
let origin = event.origin || event.originalEvent.origin;
if (origin !== 'http://172.18.12.109:8082') {
return;
}else {
//更换iframe的src,实现iframe页面跳转
document.getElementById("iframe1").src=e.data.link;
}
},false);
}
}
}
</script>
<!-- 内部跨域子窗口1http://172.18.12.109:8081/#/Child_Diff1-->
<template>
<div class="">
<div>内部跨域子窗口1</div>
<button @click="onClick">点击向父窗口发送消息</button>
</div>
</template>
<script>
export default {
name: 'Child_Diff1',
data () {
return {
}
},
methods: {
onClick () {
let message = {type: 'open', link:'http://172.18.12.109:8082/#/Child_Diff2'};
//子窗口向父窗口发送消息,消息中包含我们想跳转的链接
window.parent.postMessage(message,'http://172.18.12.109:8080');
}
}
}
</script>
实现效果:
因此,最终可实现: 点击跨域子窗口1的按钮,向父窗口发送消息,告诉父窗口要跳转的跨域子窗口2的链接,父窗口接收到消息后,更改iframe src的url,即可实现不用打开新页面,iframe子窗口的变化。