iframe 加载中 ---前端

在引入iframe过程中,显示加载中,监听加载完成事件,隐藏loading组件

demo:

import React, { Component } from 'react'
import { Spin } from 'antd';
import 'public/spinStyle.scss'
export default class Agriculture1 extends Component {
    constructor(props){
        super(props)
        this.iframeRef = React.createRef();
        this.state = {
            loading: true 
        }
    }
    componentDidMount(){
        this.iframeRef.current.onload=(()=>{
            this.setState({
                loading: false,
            });
        })
    }
    render() {
        return (
            <div style={{width:'100%',height:'100%', overflow:"hidden"}}> 
              <Spin spinning={this.state.loading} tip="Loading...">
                   <iframe
                    ref={this.iframeRef}
                    title=""
                    id=""
                    src=""
                    style={{width:'100%',height:'100%',border:0,zIndex:666}}
                    ></iframe>
              </Spin>
           </div>
        )
    }
}

　　通过ref获取iframe对象,监听onload事件,从而改变loading达成目标