vue2.0项目中组件和iframe之间如何传值
- 一、vue组件
- 二、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.exteniframe.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
