解决iframe同源或跨域父子页面通信的问题

标签：

    <iframe id="iframe" name="iframe" src="https://www.baidu.com/" frameborder="0" width="100%" scrolling="auto”）"></iframe>

同源情况下，直接可以获取iframe内嵌页面的dom对象：

通过document.querySelector('#iframe').contentDocument，可以获取内嵌页面的dom对象

以下是我要执行自动触发内嵌页面的点击事件。

    iframeLoad() {
      const iframe = document.querySelector('#iframe')
      // 监听iframe渲染dom的节点
      iframe.onload = () => {
        // 第一种：通过遍历自动触发所有后代节点的点击事件
        setTimeout(() => {
          const arr = iframe.contentDocument.body.childNodes
          if (arr.length) {
            arr.forEach((item, index) => {
              if (item.onclick) {
                setTimeout(() => {
                  item.onclick()
                }, 1000 + index * 200)
              }
            })
          }
        }, 100)
        // 第二种：获取指定dom触发指定的事件
        setTimeout(() => {
          iframe.contentDocument.getElementById('btn2').onclick()
        }, 1000)
        setTimeout(() => {
          iframe.contentDocument.getElementById('btn1').onclick()
        }, 2000)
      }
    }

跨域情况下，可以通过父子页面传参来实现：

传递数据的一方通过iframe.contentWindow.postMessage（）来发数据

接收数据的一方通过window.addEventListener('message', dealMessage, false)来接收数据

在父页面传递数据：

  mounted() {
    // 页面初始化调用函数
    this.iframeLoad()
  },
  methods: {
    iframeLoad() {
      const iframe = document.querySelector('#iframe')
      // 监听iframe渲染dom的节点
      iframe.onload = function () {
        // 在onload事件里，父页面给子页面传参，1是要传递的数据，传递的数据放在第一个参数，第二个参数是子页面的url,不指定的话写*
        iframe.contentWindow.postMessage(1, '*')
      }
    }
  }

子页面接收数据

// 第一个参数是固定写法，第二个参数是一个函数，函数的参数e.data存放传递的数据
window.addEventListener('message', dealMessage, false)
function dealMessage(e) {
  if (e.data === 1) {
    const arr = document.body.childNodes
    if (arr.length) {
      arr.forEach((item, index) => {
        if (item.onclick) {
          setTimeout(() => {
            item.onclick()
          }, 1000 + index * 200)
        }
      })
    }
  }
}