iframe 数据通信 postMessage 扩展

使用说明

安装

npm i postmessage-pro -S

引用

import PostMessagePro from 'postmessage-pro'

/**
 * @description: PostMessage实例化
 * @param {Object} initObj {iframeId: 子iframe标签id, isChild: 是否为子节点引用（默认为false）, context: 当前页面上下文（默认为window）}
 */
const postMessagePro = new PostMessage({
  iframeId: '',
  isChild: false,
  context: this,
})

暴露三个方法

/**
 * @description: 添加监听，在页面加载的生命周期中调用
 * @param {null}
 * @return {null}
 */
postMessagePro.addMessageListener()
/**
 * @description: 移除监听，在页面卸载的生命周期中调用
 * @param {null}
 * @return {null}
 */
postMessagePro.removeMessageListener()
/**
 * @description: 消息分发方法
 * @param {String} _method 要触发的iframe对象的方法名
 * @param {*} _params 要传递的参数
 * @param {Function} _callback 回调函数，接收触发的iframe对象的方法所return的值
 * @return {null}
 */
postMessagePro.postMessage(_method, _params, _callback)

使用示例

父应用

// React
import PostMessagePro from 'postmessage-pro'

componentWillMount(){
  this.postMessagePro = new PostMessagePro({
    iframeId: 'exForm',
    context: this
  })
  this.postMessagePro.addMessageListener()
}
componentWillUnmount() {
  this.postMessagePro.removeMessageListener()
}

handleClick = ()=>{
  this.postMessagePro.postMessage('childFn', 'parentParams', (childReturnData) => {
    console.log(childReturnData) // output: childReturnData
  })
}

render(){
  return (<div>
    <iframe id="exForm" src='子应用地址'></iframe>
    <button onClick={this.handleClick}>触发iframe内页面方法</button>
  </div>)
}

子应用

// VUE
<script>
import PostMessagePro from 'postmessage-pro'

export default {
  beforeMount() {
    const postMessage = new PostMessagePro({ isChild: true, context: this })
    postMessage.addMessageListener()
  },
  beforeUnmount() {
    postMessage.removeMessageListener()
  },
  methods: {
    childFn(parentParams) {
      console.log(parentParams) //output: parentParams
      return 'childReturnData'
    },
  },
}
</script>