React Series: An Auto-Height iframe Component
When embedding iframes in a webpage, you always need to deal with the iframe height problem.
How do we do it in React?
class FullheightIframe extends Component {
constructor() {
super();
this.state = {
iFrameHeight: "0px"
};
}
render() {
return (
<iframe
style={ {
width: "100%",
height: this.state.iFrameHeight,
overflow: "visible"
}}
onLoad={() => {
const obj = ReactDOM.findDOMNode(this);
this.setState({
iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px"
});
}}
ref="iframe"
src={this.props.src}
width="100%"
height={this.state.iFrameHeight}
scrolling="no"
frameBorder="0"
/>
);
}
}