Vue集成Iframe

一、应用场景，为什么要集成Iframe？

1、庞大项目拆分后，便于管理和部署，用集成Iframe的方法合并
2、避免功能重复开发，共用模块可单独开发为一个项目，既可独立部署，也可集成到中台系统

二、集成方法

1.如何加载iframe

代码如下：

<iframe id="iframeDemo" name="iframeDemo" @load="handleLoadComplete" :src="url" style='width: 100%;height: 100%;border-width: 0;'></iframe>
// 在iframe加载完成前，页面添加loading，避免页面出现白屏
// url 为iframe的地址
handleLoadComplete(){
     this.loading = false
}

2.Iframe和主页面间消息如何传递

代码如下：

// 主页面给Iframe传递消息
window.frames.iframeDemo.postMessage({ 
	 type:'页面1', // 如果有多个页面需要给iframe传递不同类型的消息
     data: {
         A:'',
         B:'',
         C:''
     }
 }, '*')
// Iframe给主页面传递消息(可根据实际情况添加延时函数)
setTimeout(() => {
     window &&window.parent &&
     window.parent.postMessage(
         {
             type: 'child-页面1', // 如果有多个页面需要给主页面传递不同类型的消息
             data: {
             	A:'',
             	B:'',
             }
         },
         '*'
     )
 }, 500)
 // 接收传递的信息 （iframe和主页面接收信息的方式是同样的）
 handleIframeMessage(e) {
 	  console.log(e,'e6666') // 打印获取传递过来的信息，根据信息处理自己的业务逻辑
	  if (e.data.type === 'vue-topo-init') {
	  }
 }
// 注意 ⚠️ vue项目中 接收消息必须用到监听的方法，在页面销毁时需移除监听
mounted() {
  window.addEventListener('message',this.handleIframeMessage,false)
},
beforeDestroy() {
  // 取消监听
  window.removeEventListener("message", this.handleIframeMessage);
},
 

3、寄语

理智的做法只有在做很小的决定时才有效。
至于改变人生的事情，你必须冒险。

---