美文网首页
react 中嵌入iframe 高度自适应

react 中嵌入iframe 高度自适应

作者: 别闹__ | 来源:发表于2018-03-14 15:34 被阅读0次

    项目需求在react 嵌入iframe

    高度自适用

    直接上代码

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Row, Col, Icon, Button, Layout, Menu, Card } from 'antd';
    
    
    export default class Index extends React.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="/courses.html" 
                    width="100%" 
                    height={this.state.iFrameHeight} 
                    scrolling="no" 
                    frameBorder="0"
                />
        );
      }
    }
    
    

    相关文章

      网友评论

          本文标题:react 中嵌入iframe 高度自适应

          本文链接:https://www.haomeiwen.com/subject/vyvfqftx.html