最近項目中遇到一個與內嵌iframe頁面之間通訊的問題,起初與原生之間通訊很簡單,沒想到過與vue項目通訊的問題,霎時間一臉懵*啊,百度了一下,原來是那麼簡單,這裏記錄下以供下次參考vue
//vue頁面 向 內嵌iframe傳遞事件 // vue頁面代碼 let frame = document.getElementById('iframeId'); // 或者用vue語法 let frame = this.$refs.iframeId frame.contentWindow.postMessage(object,'*'); // object爲傳送的對象 *號爲接收數據的項目地址 // iframe頁面 window.addEventListener('message',function(event){
·// 傳送的數據在event.data裏面 })
// iframe頁面向vue項目頁面傳遞事件 // iframe頁面 window.parent.postMessage(object,'*'); // object爲須要傳送的數據對象 *號爲接收數據的項目url地址 //主頁面 window.addEventListener('message',,function(event){ // 數據在event.data對象中 })