react 里面嵌套iframe高度自适应问题

Question

请教个问题，react里面引入iframe我需要等iframe里面的html页面全部加载完再去获取这个html的高度，期望的是在子iframe里面获取高度后调用父react里面的方法，该怎么写
目前是这么写的但加载出来的iframe高度不正确，怀疑是onload拿到的是子iframe未渲染完的高度
所以想在子iframe里面获取高度后调父react页面的方法来setState子iframe的高度

        <iframe 
          id="aa"
          style={{width:'100%'}}
          onLoad={() => {
              const obj = ReactDOM.findDOMNode(this.refs.iframe);
              console.log(obj,obj.contentDocument.body,obj.contentDocument.body.scrollWidth, obj.contentDocument.body.scrollHeight)
              this.setState({
                  "iFrameHeight":  obj.contentDocument.body.scrollHeight + 'px'
              });
          }} 
          ref="iframe" 
          src="ink/ink.html" 
          width="100%" 
          height={this.state.iFrameHeight} 
          scrolling="no" 
          frameBorder="0"
        >
        </iframe>

请大神们不吝赐教

Answer 1

楼上那种做法，在父级页面访问子级页面的dom属性，会受同源策略的限制，只适用于一定的场景。更加通用的做法是，在子级页面里侦听window.onload,获取自身的页面dom高度，然后通过postMessage将消息传递给父级页面，父级页面通过侦听message事件拿到子级页面dom高度，从而设置iframe元素高度。

Answer 2

这个问题是自己对iframe不够了解才卡主的想想也可笑一直在react里面寻求答案
引进的iframe是本地的这样我们可以换种思维，我们在子iframe里面拿到高度直接给react的指定元素，

1. 我们需要在父页面就是react页面引入react-dom 用来绑定该页面的dom元素

like this

import ReactDOM from 'react-dom';
<iframe 
    id="iframe-b"
    style={{width:'100%'}}
    onLoad={() => {}} 
    ref="iframe" 
    src={inkSrc}
    width="100%" 
    scrolling="yes" 
    frameBorder="0"
      >
</iframe> 

2.在子页面页面完全加载完利用js获取页面高度给父react页面
like this

  let h  =  document.getElementById('iframe-body').scrollHeight;
  parent.document.getElementById("iframe-b").style.height = h + "px";