vue2.0项目中组件和iframe之间如何传值

一、vue组件

 mounted() {
    // 注册 message 事件监听器，只注册一次
   window.addEventListener('message', this.handleFromIframeMessage)
},
beforeDestroy() {
     // 移除事件监听器
     window.removeEventListener('message', this.handleFromIframeMessage)
 },
 
// 获取要传递的信息传递
 sendMessageToIframe() {
     const iframe = document.getElementById('iframeContainer')
     接口().then(({ data }) => {
         console.log(data, '请求到相关信息')
         this.Agent = data.exten
         iframe.contentWindow.postMessage(
             {
                 password: data.password,
                 proxyUrl: decrypt(data.proxyUrl),
                 userName: data.exten + '@shzxxx',
                 agentStatus: data.agentStatus+'',
             },
             '*'
         )
     })
 },
 // 处理从 iframe 接收到的消息
 handleFromIframeMessage(event) {
     console.log('vue组件', event.data)
     if (event.data.type == 'ncomingCall' && this.Agent == event.data.Agent) {
        //vue组件处理收到iframe页面数据后相关逻辑
     }
 },

二、iframe组件

window.addEventListener('message', function (event) {
    // 检查消息的来源是否是预期的 Vue 组件页面
    console.log('iframe页面', event.data)
    //iframe页面收到vue组件传递相关数据处理
})

//iframe组件向vue组件传递数据
 window.parent.postMessage(json, '*')

结束啦！

链接: https://blog.csdn.net/tangdou369098655/article/details/131467799