vue元件嵌入iframe與其他系統頁面跨域通訊

今天在專案中用到在元件中嵌入iframe呼叫另乙個vue專案中的元件頁面

ok,現在我們需要給嵌入iframe中的子頁面（也就是另乙個vue專案中的頁面傳遞資訊）

父頁面呼叫就是給iframe的ref賦值，然後我們根據

this.$res.iframe.contentwindow.postmessage('我是要傳遞的資料，'可以是string或者是obeject',我是要接收頁面的ip位址+埠號或者是*號鍵')

let options = ;

this.$refs.sentable.contentwindow.postmessage(
options,
"");

子頁面運用

window.addeventlistener('message', function (e) 

messageele.innerhtml = "從" + e.origin + "收到訊息： " + e.data;
});

然後子另外vue專案中的頁面給iframe傳遞資料

var btn = document.getelementbyid('btn1');

btn.addeventlistener('click', function (e) , '*');
});

window.addeventlistener("message", e => 

let formid = e.data.formid;
this.$emit("setid", );
});

vue使用iframe嵌入html，js方法互調

前段時間 使用h5搞了個用cesium.js做的地圖服務功能，後來想整合到vue專案，當然最簡單的就是iframe直接拿來用了。但html和vue的方法互動就是成了問題，vue呼叫html種方法還好，尤其是html呼叫vue中的方法當初就沒有解決，忙著專案上線直接搞了個setinterval不停輪詢...

vue元件中使用iframe元素

需要在本頁面中展示vue元件中的超連結，位址列不改變的方法 goback 需要使同層元素不被覆蓋，可以加 不過html5有新的dialog元素用於對話方塊。iframe的一些方法 獲取iframe內容 var iframe document.getelementbyid iframe1 var iw...

Vue中嵌入iframe遇到的問題

1.iframe嵌入後在ios中無法滾動的問題。2.iframe嵌入後，設定高度100 出現上下滑動輕微晃動的問題。提供兩種解決辦法，為什麼產生這種晃動的bug還不得而知。解決辦法 1.在iframe元件外層再巢狀一層子元件。即把iframe所在元件引入其他子元件，不把iframe元件直接當做子元件...