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);
            }
        })