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、寄语

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

---