跨域嵌套传递信息
最常见的就是iframe
一般用户gis
地图航拍或者嵌套其他网页的页面之类的
postMessage 之间的传值问题
- 父组件里面嵌套了子组件
<div>222</div>
<iframe id="iframeid" src="./index4.html" frameborder="0"></iframe>
父传子
- 父
let title='shfdsjkj'
window.onload = () => {
document.getElementById('iframeid').contentWindow.postMessage({ type: ames }, '*')//传的数据
}
- 子
window.addEventListener('message', e => {
console.log(e.data.type, '===========');
},false)
这里讲几个重点
- 首先父组件的传值时候一定要写在文档加载完成之后
因为如果不写onload就会出现iframe
渲染完毕但是并没有找到对应方法或者值就是undefiend
,这里考虑到执行顺序
子传父
- 子
window.parent.postMessage({
type: 'addTemplateLayers'
}, '*');
function addFn(data) {
console.log(data);
}
- 父
//这是传递字符串
window.addEventListener("message", getMessage);
function getMessage(e) {
console.log(e.data.type, '222');//addTemplateLayers
}
//这两行代码可以合并
window.addEventListener("message", e=>{
console.log(e.data.type,'第二次哦');
});
//使用子组件的方法
window.onload = () => {
document.getElementById('iframeid').contentWindow.addFn('我是父组件调用子组件')
}
这里同理也要写在onload上面,首先获取iframeid的window元素,直接调取子组件里面的方法
到这里postMessage
就已经传值完毕了 ,不清楚的欢迎留言
vue
,react
的话只需要在mounted
,useEffuct
里面写就好了