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

古城微笑少年丶 2023-06-17 10:51 3阅读 0赞

*  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 (
          <div className="iframe-container">
            <iframe
              id="iframeFaq"
              title="study"
              src="https://www.csdn.net/"
              width="100%"
              height="100%"
            ></iframe>
          </div>
        );
      }
    }
    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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>test</title>
        <style>
            body,html{overflow: hidden;}
            #myiframe{padding-top: 13px;}
        </style>
    </head>
    <body>
        <iframe id="myiframe" onload="changeFrameHeight()" src="https://www.baidu.com/" width="100%" height="150" frameborder="0"></iframe>
        <script>
            function changeFrameHeight(){
                var ifm= document.getElementById("myiframe");
                ifm.height=document.documentElement.clientHeight;
            }
                window.onresize=function(){
                changeFrameHeight();
            }
        </script>
    </body>
    </html>