最近做的一個專案，在Vue中要載入本地的html。

vue cli 3

檔案主目錄中包含 public，

所以首先在 public 資料夾下新建 static 資料夾，

然後將html檔案及相關引用拷貝到static資料夾下。

在 vue 的檔案中新增iframe的物件。

 1 <template>
 2     <iframe
 3         id = "iframe"
 4         ref="frame"
 5         scrolling="no"
 6         frameborder ="0"
 7         width="100%"
 

 8         :height="height"
 9         v-bind:src = "src"        
10         @load="onLoad"
11         >
12     </iframe>
13 </template>

因為專案中要根據選單點選來載入不同的html檔案，

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

 1 onLoad(frame) {            
 2           console.log(this
 
.page);
 3           let url = 'static/'+ this.page + '.html'; 
 4           console.log(url);
 5           this.src = 'static/'+ this.page + '.html'; 
 6           
 7           if(this.page=="GisMonitor"){
 8             this.height = '99%';
 9           }
10           this.iframeWindow = this.$refs.frame.contentWindow;
 
11         },

另外在這裡添加了與html頁面的通訊，使用postMessage 傳遞引數

 1 sendMsg(message){
 2             switch(message){
 3                 case "GisMonitor":
 4                     console.log(this.iframeWindow);
 5                     console.log("Send:"+message)
 6                     this.iframeWindow.postMessage({
 7                         cmd:'GisMonitor',
 8                         params:{"name":"1"}
 9                     },'*');
10                     break;
11                 default:
12                     break;
13             }
14         }

在html頁面中，新增監聽事件

1 this.window.addEventListener('message',function (event) {
2             let dataMessage = event.data;
3             console.log("Receive:"+ dataMessage);
4             switch(dataMessage.cmd){
5                 case "GisMonitor":
6                     let val = dataMessage.params;
7                     console.log(val);
8             }
9         })