vue+iframe使用及踩坑

陪伴者發表於2024-05-29
Vue

父級引用

<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區分下


---------未完待續

相關文章