jknife/src/class/PostMessage.js

javaScript工具库

/**
 * PostMessage 跨源通信
 * @param {Object} options 描述
 *
 * @param {Function} options.xxx 描述
 *
 * @example
 * new PostMessage({
 * })
 */
class PostMessage {
  // eslint-disable-next-line no-undef
  eventBox = {}
  // eslint-disable-next-line no-undef
  messageCallbackFn = null

  /**
   * 监听其他postMessage发送过来的消息
   */
  on (eventName, callback) {
    this.eventBox[eventName] = callback
  }

  /**
   * 向某个window发送消息
   */
  emit (contentWindow, eventName, data = {}, targetOrigin = '*') {
    console.log(eventName)
    if (!(contentWindow != null && contentWindow === contentWindow.window)) throw new Error('emit contentWindow should be a window')
    if (!isObject(data)) throw new Error('emit data should be a json')
    if (!eventName) throw new Error('emit need eventName')
    contentWindow.postMessage({ eventName, data }, targetOrigin)
  }

  /**
   * 添加监听
   */
  addEventListener () {
    if (this.messageCallbackFn) return
    this.messageCallbackFn = this.messageCallback.bind(this)
    window.addEventListener('message', this.messageCallbackFn)
  }

  removeEventListener () {
    window.removeEventListener('message', this.messageCallbackFn)
    this.messageCallbackFn = null
  }

  messageCallback (event) {
    if (event) {
      const data = event.data
      if (!isObject(data) && !data.eventName) return
      const eventTarget = this.eventBox[data.eventName]
      if (eventTarget) eventTarget(event.data.data, event)
    }
  }
}

function isObject (value) {
  const type = typeof value
  return value !== null && (type === 'object' || type === 'function')
}

export default PostMessage