Highly adaptive problem of nested iframe in react

Let me ask you a question. When iframe is introduced into react, I need to wait for all the html pages in the iframe to load before getting the height of the html. What I expect is to call the method in the parent react after obtaining the height in the child iframe. How to write
is currently written in this way, but the loaded iframe height is incorrect. It is suspected that onload is getting the height of the unfinished rendering of the child iframe
, so if you want to get the height in the child iframe, the method of adjusting the parent react page to set the height of the child 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>

Please do not hesitate to give advice to the great gods

Typescript html html5 javascript
Jun.14,2021

this question is that I don't know enough about iframe before the card owner thinks that it is ridiculous to keep looking for answers in react.
the iframe introduced is local so that we can think differently. We get the designated elements that are highly directly assigned to react in the sub-iframe.

  1. We need to introduce react-dom into the parent page, which is the react page, to bind the dom element of the page

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. After the child page is fully loaded, use js to get the page height to the parent react page
like this 

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

accesses the dom attribute of the child page on the parent page, which is restricted by the same origin policy and is only applicable to certain scenarios. A more general approach is to listen to window.onload, in the child page to get its own page dom height, and then pass the message to the parent page through postMessage. The parent page gets the dom height of the child page by listening for message events, thus setting the iframe element height.

Previous: The value passed by router-link params cannot be received.

Next: Visit Google Maps API java.net.SocketException: Connection reset

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu