關於vue項目和內嵌iframe頁面之間的通訊問題

最近項目中遇到一個與內嵌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對象中
})
相關文章
相關標籤/搜索