iframe之间的通信方式

iframe标签可以实现html主页面嵌套html子页面，那么父子页面间的传值有以下两种方式

1、postMessage（可以修改iframe的情况下使用）

父页面

 created() {
    // 父页面发送给iframe页面的消息
    let iframe = this.$refs.iframeDom
    let _window = iframeDom.contentWindow // iframe的window对象 可以事件监听，事件传递
    let _document = iframeDom.contentDocument // 可以获取节点
    // postMessage 有两个参数，第一个是传递的消息，第二个是传递到哪里去 *表示所有，可以直接传嵌套的网址
    _window.postMessage({ type: '自定义传递类型，后续可以根据不同类型做不同处理', data: '消息内容体' }, '*')
  },
  mounted() {
    // 父页面监听iframe消息
    window.addEventListener('message', (e) => {
      console.log('iframe数据', e.data)
    })
  }

iframe

mounted() {
    // iframe页面监听父页面发过来的消息
    window.addEventListener('message', (e) => {
      console.log('父页面数据', e.data)
    })
  },
  methods: {
    // iframe页面给父页面发送消息
    transinformation() {
      // 获取父级window
      // window.parent（最近的上一级父页面）window.top （最顶层的父页面，即有多层嵌套iframe的时候使用）
      window.parent.postMessage({ type: '自定义传递类型，后续可以根据不同类型做不同处理', data: '消息内容体' }, '*')
    }
  }

2、回归dom操作

父页面

created() {
    // 获取iframe的dom的值
    let iframe = this.$refs.iframeDom
    let _document = iframeDom.contentDocument
    let textAreaDom = _document.querySelector('获取的dom类名或id')
    let _value = textAreaDom.value
    let _position = textAreaDom.getAttribute('data-pos')
  },

  mounted() {
    // 获取要修改的iframe值的dom元素绑定事件
    let iframe = this.$refs.iframeDom
    iframe.addEventListener('load', () => {
      let _document = iframeDom.contentDocument
      let textAreaDom = _document.querySelector('获取的dom类名或id')
      textAreaDom.addEventListener('change', (e) => {
        e.tartget.selectionStart // 获取光标位置
        textAreaDom.setAttribute('data-pos', e.tartget.selectionStart)
      })
    })
  },