Vue 使用iframe引用html頁面實現vue和html頁面方法的調用操作
當我們需要在vue中使用其他模塊或者其他地方的一些html頁面功能時，我們可以使用iframe去引用html頁面，實現他們的交互
首先我們可以再vue頁面中使用標簽引用html頁面
<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頁面方法，我們可以使用如下代碼
mounted() {
this.iframeWin = this.$refs.iframeDom.contentWindow;
},
首先在我們的mounted方法中得到iframe對象
在vue頁面使用postMessage的API向html頁面發(fā)送請求數據，因為我們的vue和html頁面可能不在同一域名，所以會產生跨域的問題，這里我們使用的postMessage可以實現跨域，我這里在google和IE11測試都是可以跨域的
loadSmgxmlModels(data) {
this.iframeWin.postMessage(data,"*")
}
這里的data就是我們要傳遞給html頁面的數據
“*”,這里代表的是所有地址可以接收到，我們也可以指定地址，例如：www.baidu.com
在html頁面的標簽中編寫監(jiān)聽方法，用來監(jiān)聽我們的請求，獲取數據
window.addEventListener('message', function(ev) {
// 當我們是父子窗口進行消息傳遞時，可以使用此判斷，只接受父窗口傳遞來的消息,
if (ev.source !== window.parent) return;
var data = ev.data;
console.log("vue傳遞的數據為："+data);
//下面可以調用我們html頁面js中的方法，使用傳遞的數據進行操作了
}, false);
這里我們監(jiān)聽的就是message，可以獲取數據。
補充知識：Vue界面使用iframe嵌套html界面的傳值問題
一.從父頁面給子頁面?zhèn)髦?/strong>
可以通過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代碼如下
<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的值
callchild(){
let obj1=window.frames["child"];//獲得對應iframe的window對象
alert(obj1.n);
},
將callchild函數由某個button觸發(fā)，可以看到彈出窗口
以上這篇Vue 使用iframe引用html頁面實現vue和html頁面方法的調用操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中動態(tài)渲染數據時使用$refs無效的解決方案，具有很好的參考價值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
下面小編就為大家分享一篇vue將對象新增的屬性添加到檢測序列的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了Vue.js設計與實現分支切換與清除學習總結，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章介紹了Vue路由vue-router的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
Vue?Mock.js介紹和使用與首頁導航欄左側菜單搭建過程
Mock.js是一個模擬數據的生成器，用來幫助前端調試開發(fā)、進行前后端的原型分離以及用來提高自動化測試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁導航欄左側菜單搭建,需要的朋友可以參考下2023-09-09
process.env?是?Node.js?中的一個環(huán)境對象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Element實現表格分頁數據選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
創(chuàng)建vue項目沒有router、view的解決辦法
在學習vue的時候遇到很多問題,這里做一些總結,下面這篇文章主要給大家介紹了關于創(chuàng)建vue項目沒有router、view文件夾的解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-11-11
vue提倡的是在方法中只有對數據的處理，所以提供了事件修飾符用于DOM的事件處理，下面這篇文章主要給大家介紹了關于Vue自定義組件使用事件修飾符的相關資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue5中的事件修飾符(style)和template，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04