開發中可能會碰到這種情況：當前工程需要嵌入另乙個工程的頁面，此時兩個工程間的通訊可能就會碰到js跨域的問題。這裡記錄一下我的解決方法。
使用postmessage傳送訊息
使用addeventlistener監聽傳送過來的訊息
父頁面**：
>
>
class
="box"
>
>
當前頁接收的iframe資訊：span
>
style
="color
:red;
">
}span
>
div>
class
="box"
>
placeholder
="輸入內容向iframe傳送"
v-model
="msg.content"
style
="width
:180px;
">
el-input
>
@click
="send"
>
傳送el-button
>
div>
style
="height
:500px
">
:src
="url"
ref="iframe"
style
="height
: 100%;
width
:100%; frameborder=no
" frameborder
="no"
border
="0"
marginwidth
="0"
marginheight
="0"
>
iframe
>
div>
div>
template
>
>
export
default);
},data()
};},
methods:}}
;script
>
>
>
class
="box"
>
>
iframe接收的資訊:span
>
style
="color
:red;
">
}span
>
div>
class
="box"
>
placeholder
="輸入內容向父頁面傳送"
v-model
="msg.content"
style
="width
:180px;
">
el-input
>
@click
="send"
>
傳送el-button
>
div>
div>
template
>
>
export
default);
},data()
};},
methods:}}
;script
>
如果addeventlistener多次被呼叫，可以試試下面這種方法
window.
onmessage
=function
(event)
vue使用iframe嵌入html，js方法互調
前段時間 使用h5搞了個用cesium.js做的地圖服務功能，後來想整合到vue專案，當然最簡單的就是iframe直接拿來用了。但html和vue的方法互動就是成了問題，vue呼叫html種方法還好，尤其是html呼叫vue中的方法當初就沒有解決，忙著專案上線直接搞了個setinterval不停輪詢...
Vue中嵌入iframe遇到的問題
1.iframe嵌入後在ios中無法滾動的問題。2.iframe嵌入後，設定高度100 出現上下滑動輕微晃動的問題。提供兩種解決辦法，為什麼產生這種晃動的bug還不得而知。解決辦法 1.在iframe元件外層再巢狀一層子元件。即把iframe所在元件引入其他子元件，不把iframe元件直接當做子元件...
Vue使用iframe嵌入外部HTML檔案
專案開發的過程中，我們不可避免的會引入外部已經寫好的html檔案，那在不同的vue腳手架中如何成功引入html檔案呢？如何獲取到html檔案中的值呢？把要引入的檔案 假設是aaa.html檔案 放到static目錄下，在vue介面中引入 把要引入的檔案放到public目錄下，在vue介面中引入 注意...