由于同源策略存在，javascript 的跨域一直都是一个棘手的问题
父页面无法直接获取 iframe 内部的跨域资源；同时，iframe 内部的跨域资源也无法将信息直接传递给父页面
下面我来简单介绍下父子之间通信的方式, 以 Vue 项目为例
父传子
- 父页面
<template>
<div class="test">
<!-- 通过 iframe 嵌入子页面 -->
<iframe ref="iframe" src="http://localhost:8082/#/home"></iframe>
</div>
</template>
<script>
export default {
mounted() {
let iframe = this.$refs.iframe;
// 必须等 iframe 加载完毕后再发送消息，否则子页面接收不到数据
iframe.onload = () => {
// 通过 postMessage(data, 子页面协议+域名+端口号) 发送数据
iframe.contentWindow.postMessage({
name: 'wells'
}, 'http://localhost:8082');
}
}
};
</script>
- 子页面
<script>
export default {
mounted() {
// 接收父页面传递的数据
window.addEventListener('message', evt => {
// 判断是否为父页面传过来的
if (evt.origin !== 'http://localhost:8080') return;
console.log(evt.data); // {name: 'wells'}
}, false);
}
};
</script>
子传父
- 子页面
<script>
export default {
mounted() {
// 通过 postMessage(data, 子页面协议+域名+端口号) 发送数据
window.parent.postMessage({
age: 24
}, 'http://localhost:8080');
}
};
</script>
- 父页面
<template>
<div class="test">
<!-- 通过 iframe 嵌入子页面 -->
<iframe ref="iframe" src="http://localhost:8082/#/home"></iframe>
</div>
</template>
<script>
export default {
mounted() {
// 接收子页面传递的数据
window.addEventListener('message', evt => {
// 判断是否为子页面传过来的
if (event.origin !== 'http://localhost:8082') return;
console.log(evt.data); // {age: 24}
}, false);
}
};
</script>
