post message 的用法

父级页面

html

   <iframe className="iframe" style={{ height: '300px', width: '800px' }} src="http://localhost:8000"></iframe>

js

 postData = () => {
    i++
    // 发送数据
    let msg = JSON.stringify({
      name: 'chen' + i,
      sex: 'male'
    })
    // window.postMessage(msg);`
    var data = { type: 'answerResult', data: msg };
    let iframes = document.getElementsByClassName('iframe')
    iframes[0].contentWindow.postMessage(data, '*');
  }
  componentDidMount() {
    setInterval(() => { this.postData() }, 1000)
  }

子级页面

js

 callbacks(val) {
    if (val.data && val.data.type && val.data.type === 'answerResult') {
      let data = JSON.parse(val.data.data)
      this.setState({
        name: data.name
      })


    }

  }


  componentDidMount() {
    window.addEventListener('message', this.callbacks.bind(this))

  }

  componentWillUnmount() {
    window.removeEventListener('message', this.callbacks.bind(this))
  }