Vue使用iframe加載本地html，並進行通信，傳遞參數

最近做的一個項目，在Vue中要加載本地的html。

vue cli 3

 

文件主目錄中包含 public，

所以首先在 public 文件夾下新建 static 文件夾，

然后將html文件及相關引用拷貝到static文件夾下。

 

 

在 vue 的文件中添加iframe的對象。

<template>
    <iframe
        id = "iframe"
        ref="frame"
        scrolling="no"
        frameborder ="0"
        width="100%"
        :height="height"
        v-bind:src = "src"        
        @load="onLoad"
        >
    </iframe>
</template>

因為項目中要根據菜單點擊來加載不同的html文件，

所以在 onLoad 中根據傳遞的參數不同，設置不同的 src 參數值， 注意 this.src 賦值的路徑，直接寫 static ,前面不需要加任何路徑和字符。

onLoad(frame) {            
          console.log(this.page);
          let url = 'static/'+ this.page + '.html'; 
          console.log(url);
          this.src = 'static/'+ this.page + '.html'; 
          
          if(this.page=="GisMonitor"){
            this.height = '99%';
          }
          this.iframeWindow = this.$refs.frame.contentWindow;
        },

另外在這里添加了與html頁面的通信，使用postMessage 傳遞參數

sendMsg(message){
            switch(message){
                case "GisMonitor":
                    console.log(this.iframeWindow);
                    console.log("Send:"+message)
                    this.iframeWindow.postMessage({
                        cmd:'GisMonitor',
                        params:{"name":"1"}
                    },'*');
                    break;
                default:
                    break;
            }
        }

 

在html頁面中，添加監聽事件

this.window.addEventListener('message',function (event) {
            let dataMessage = event.data;
            console.log("Receive:"+ dataMessage);
            switch(dataMessage.cmd){
                case "GisMonitor":
                    let val = dataMessage.params;
                    console.log(val);
            }
        })