真正在react中实现iframe引用外部链接高度自适应（实测，有用，附完整代码）

• react:  iframe fit content height

网上找了一天，没有看到真正有用的，重复来重复去都是那两个方法。最后自己解决了，方法记录下来，方便大家学习使用。

完整代码如下：

App.js

import React, { Component } from "react";
import "./App.css";
class App extends Component {
  componentDidMount() {
    document.documentElement.style.overflow = "hidden";
    document.documentElement.style.height = "100%";
    document.body.style.overflow = "hidden";
    document.body.style.height = "100%";
    document.getElementById("root").style.height = "100%";
    document.getElementById("root-div").style.height = "100%";
    document.getElementsByClassName("App")[0].style.height = "100%";
  }
  componentWillUnmount() {
    document.documentElement.style.overflow = "auto";
    document.documentElement.style.height = "auto";
    document.body.style.overflow = "auto";
    document.body.style.height = "auto";
    document.getElementById("root").style.height = "auto";
    document.getElementById("root-div").style.height = "auto";
    document.getElementsByClassName("App")[0].style.height = "auto";
  }
  render() {
    return (
      

        
      
    );
  }
}
export default App;

App.css

.iframe-container{height: 100%;padding-top: 70px;}
#iframeFaq{border: 0;}

注意：iframe框架设置height: 100%;之后，无效。需要将它的上级父标签都设置height: 100%。同时，为了禁用html,body自带的滚动条，所以在componentDidMount中禁用滚动条，然后在componentWillUnmount启动滚动条，以不影响其他页面。为了样式不影响其他页面，其他页面也有的这几个标签需要单独在componentDidMount和componentWillUnmount中设置样式。

• html:  iframe fit content height