用Promise封装postMessage

关于Promise，大多数的运用场景在于封装ajax异步通讯。但Promise本质上是异步编程的一种解决方案，可用于替代传统的回调函数和事件。现在我们用它来封装postMessage便于使iframe父子间通讯代码变得更清晰整洁

前端微服务场景：需要一个公用弹窗，父通过iframe传数据，通过url控制弹窗类型。子iframe是弹窗，点击iframe内的按钮，需要将子发ajax通讯完后的信息带回给父

Demo

postMessage方式

//发信息给子iframe
$iframeWin.postMessage({
        msg: '我是来自父的信息'
}, '*')

//监听子的回信
window.addEventListener('message', handleMessage)
handleMessage (event) {
    // 根据上面制定的结构来解析iframe内部发回来的数据
      const data = event.data
      console.log(data)
}

Promise封装后

import iframeWin from '@/utils/iframeWin'
//发信息给子iframe,并监听回信
  iframeWin.postMessage({
        $dom: this.$refs.iframe.contentWindow, // 此例为vue环境，传入原生dom即可
        data: {
          msg: '我是来自父的信息'
        }
  }).then(res => {
        console.log('res', res)
  })

封装postMessage

// 封装postmessage
class IframeWin {
  constructor (opt = {}) {
    this.opt = opt // 用户初始配置
    this.data = null
  }
  postMessage (opt) {
    opt.$dom.postMessage(opt.data, '*')
    return new Promise((resolve, reject) => {
      window.addEventListener('message', function (event) {
        resolve(event.data)
      })
    })
  }
}

export default new IframeWin()