iframe通信

重点

1. 接收信息：window.addEventListener(‘message’, (event) => {}）
2. 发送信息：iframeEl.postMessage(prame, this.domain)

实例

1.父页面

注意点
	1.domain: window.location.origin //要传
	2.在使用onload方法
	
let iframe = document.getElementById('iframeDOM');	
iframe.onload = () => {
	this.iframeEl = document.getElementById('iframeDOM').contentWindow;
	 // 1. 初始化iframe的显示
	let prame=JSON.stringify({
        type: "init", 
        fieldsVal: null,
    })
    this.iframeEl.postMessage(prame, this.domain);
    
	//2.响应事件
	window.addEventListener('message', (event) => {
   		console.log("来自子页面iframe的数据：", event.data)
        
   		if(typeof event.data == "string" && event.origin === this.domain){
     		let {type,data={}} = JSON.parse(event.data);
     		if(type == "event"){
       			this.handleSubmit(data)
     		}
   		}

   },false);
}

2.iframe子页面

1. window.addEventListener("message", (event) => {
	console.log('iframe, 来自父页面的数据：', event)
	if(event.origin !== 'http://127.0.0.1:8080') return;
	this.iframeInfo = {
		source: event.source,
		event.origin
	}

	let data = JSON.parse(event.data);
    let { type, fieldsVal } = data;
    
    //我这里是表单，所以需要初始化显示  type ？ 新建 ： 修改
	//初始化显示 
    if (type == "init" && fieldsVal) {
		//处理数据
	}
      
	// 执行回调事件
      if (type == 'event') {
        let params = JSON.stringify({
          type: "event",
          data: that.triggerEvevt()
        });
        event.source.postMessage(params, event.origin);
      }
})
	
2. methods:{
	handleClick(){
		let params = {
			data: "表单数据"
		}
		this.iframeInfo.source.postMessage(params, this.iframeInfo.origin);
	}
}

其他

问题：在本地使用静态html，测试通信时，iframe会报错
解决：需要在服务器运行

下面是框架打包后的调试

1. react、Vue打包后的文件，启动个服务 本地启动服务的链接
2. 在打包文件里加demo.html,在本地进行iframe同信调试
3.