一、應用場景，為什么要集成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、寄語

理智的做法只有在做很小的決定時才有效。
至于改變人生的事情，你必須冒險。

---