与iframe交互

index： 父组件
iframe： 嵌套的子组件

• 子组件 => 父组件

父组件通过iframeDom.contentWindow定义一个方法，这个方法会挂载在子组件的window上
子组件 调用 window.fuc() 即可将参数传递给父组件

<iframe ref="iframe" style="width: 100%; height: 750px;" :src="url" />
1

// 父组件接收消息
 this.$refs.iframe.contentWindow.getChild = (data) => {
  console.log( data) // hhh
}

// 子组件发送消息
if (window.getChild) window.getChild('hhh')
1
2
3
4
5
6
7

• 父组件 => 子组件: iframeDom.contentWindow.postMessage()

//父组件发送消息
this.$refs.iframe.contentWindow.postMessage('xxx', '*')

//子组件消息
window.addEventListener('message', function(event) {
   console.log(event.data) // xxx
 })
1
2
3
4
5
6
7