跨域嵌套传递信息（iframe）

跨域嵌套传递信息

最常见的就是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里面写就好了