父級引用
<iframe id="自定義id" @load="iframeLoadHandle" src="引入iframe地址" frameborder="0" scrolling="auto" class="iframe-con" width="100%" height="100%"></iframe> @load 為iframe載入完成後觸發方法
methods: { iframeLoadHandle(){ const data = { action: 'updatedMessageList', messageList: this.messageList, oldVal: this.oldMessageList, target: this.focusHistoryItem }; this.iframeUpdatedHandle(data) // messageList更新的資料 action為區分的動作 }, iframeUpdatedHandle(data) { const iframe = document.getElementById('自定義id'); // 針對需要傳送資訊模組的iframeidif(!iframe){ return } const messageObject = { action: 'parentAction', module: 'workBench', id: 'iframeRecording', data }; // data為可以往iframe傳遞指定資料 // moudule必傳 action必傳 id必傳 data非必傳 iframe.contentWindow.postMessage(messageObject, '*'); } }
子級接收
mounted() { // 監聽message事件- iframe window.addEventListener('message', this.handleMessage) }, methods: { async handleMessage(event) { // 確保訊息來自預期的源 // 如果需要更嚴格的安全性,請驗證event.origin const res = event.data console.log('---接收資料iframe:', event.data) if (window.parent == window) { this.msgError('當前頁面不在iframe中,是頂級視窗') return } if(res.type === 'webpackWarnings') { const data = { action: 'requestAgain', }; const parentData = {moudule: 'iframeText', id:'iframeText', data: data}; window.parent.postMessage(parentData, '*'); return } if (res.action === 'parentAction') { // 檢查接收到的引數 if (res.module === 'workBench' && res.id) { if(res.data.action === 'iframeLoadHandle') { // iframe初始化觸發action // 處理所需邏輯 } } } } }
須知:
1,傳參涉及到token資訊或者使用者,地址等敏感資訊需要加密處理再傳值,不加密的話有的瀏覽器不支援會攔截的
2,如果涉及iframe中調取的介面需要賦值頭部token值的話,可以考慮使用localStorage或sessionStorage,因為它們是基於iframe視窗的,而不是基於域名的。這樣,每個iframe可以有自己的狀態,而不會受到父頁面的影響。之前在iframe中使用Cookies.set(TokenKey, token)會儲存到父級的cookies中,iframe再獲取的時候就獲取不到了,除非是同源的,所以最好區分下
3,iframe標籤上的id是唯一的不能重複,處理多個的話id區分下
---------未完待續