當我們需要在vue中使用其他模塊或者其他地方的一些html頁面功能時，我們可以使用iframe去引用html頁面，實現他們的交互
首先我們可以再vue頁面中使用標簽引用html頁面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<template> <div> <iframe name="iframeMap" id="iframeMapViewComponent" width="100%" height="470px" v-bind:src="smgHtmlPath" frameborder="0" scrolling="no" ref="iframeDom" ></iframe> </div></template> |
其中src就是我們html的地址，我們可以在data中定義smgHtmlPath屬性，在我們的created方法中初始化，為該屬性賦予初始值
如果頁面加載出來了，我們就可以開始vue頁面和html頁面的交互了
如果我們需要vue頁面調用html頁面方法，我們可以使用如下代碼
|
1
2
3
|
mounted() { this.iframeWin = this.$refs.iframeDom.contentWindow;}, |
首先在我們的mounted方法中得到iframe對象
在vue頁面使用postMessage的API向html頁面發送請求數據，因為我們的vue和html頁面可能不在同一域名，所以會產生跨域的問題，這里我們使用的postMessage可以實現跨域，我這里在google和IE11測試都是可以跨域的
|
1
2
3
|
loadSmgxmlModels(data) { this.iframeWin.postMessage(data,"*")} |
這里的data就是我們要傳遞給html頁面的數據
“*”,這里代表的是所有地址可以接收到，我們也可以指定地址，例如：www.baidu.com
在html頁面的標簽中編寫監聽方法，用來監聽我們的請求，獲取數據
|
1
2
3
4
5
6
7
|
window.addEventListener('message', function(ev) { // 當我們是父子窗口進行消息傳遞時，可以使用此判斷，只接受父窗口傳遞來的消息, if (ev.source !== window.parent) return; var data = ev.data; console.log("vue傳遞的數據為："+data); //下面可以調用我們html頁面js中的方法，使用傳遞的數據進行操作了}, false); |
這里我們監聽的就是message，可以獲取數據。
補充知識：Vue界面使用iframe嵌套html界面的傳值問題
一.從父頁面給子頁面傳值
可以通過url進行傳值，若嵌入外網例如www.baidu.com,可以設置為
<iframe name = "child" id = "child" :src="www.baidu.com#asd=1" width="1920" height="880" frameborder="0" scrolling="no" style="position:related;top: 2.8px;left: 0px;"></iframe>
asd后面跟的值可以根據需要更改，不影響地址的訪問
若為本地html文件，類似的可以寫作
:src="test.html#asd =1"
但是如何在子頁面讀取asd的值這個還沒探究成功，稍后若尋找到合適的方法會再更新。這種方法比較適合比較簡單的需求
二.父頁面獲取子頁面的值
例如我們在子頁面設置四個click事件，JS代碼如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<script> var n = 0; function FN() { n = 1; alert('hello1'+n); } function EN() { n = 2; alert('hello1'+n); } function ER() { n = 3; alert('hello1'+n); } function GN() { n = 4; alert('hello1'+n); }</script> |
那么在父頁面我們可以在method中定義如下函數獲取到n的值
|
1
2
3
4
|
callchild(){ let obj1=window.frames["child"];//獲得對應iframe的window對象 alert(obj1.n); }, |
將callchild函數由某個button觸發，可以看到彈出窗口
以上這篇Vue 使用iframe引用html頁面實現vue和html頁面方法的調用操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_44209403/article/details/107344666
