在ReactJS中将iframe的高度设置为scrollHeight

  • Z时代
  • 2024-01-10
  • 分类：问答

  • 与传统的静态HTML相反，由于其动态生成的组件结构和事件模型，因此无法在React中使用该问题的典型解决方案：

脚本：

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

的HTML：

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

  • 有一个NPM包react-iframe，但看起来没有完成（只接受道具url，width，height）：

https://www.npmjs.com/package/react-

iframe

  • 解决方案的可能部分是监听的load事件iframe，但以与React兼容的方式进行。

React中有没有一种方法可以将an iframe的高度设置为其可滚动内容的高度？

我的代码：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Iframe from 'react-iframe'
export default class FullheightIframe extends Component {
    componentDidMount() {
        console.log("IFRAME DID MOUNT");
    }
    renderReactFrame() {
        return (
            <Iframe url="http://www.example.com" width="100%" height="100%" onLoad={()=>{console.log("IFRAME ON LOAD")}}></Iframe>
        );
    }
    renderHTMLFrame() {
        return (
            <iframe 
                onLoad={(loadEvent)=>{
                    // NOT WORKING var frameBody = ReactDOM.findDOMNode(this).contentDocument.body; // contentDocument undefined
                    // NOT WORKING obj.nativeEvent.contentWindow.document.body.scrollHeight // contentWindow undefined
                }} 
                ref="iframe" 
                src="http://www.example.com" 
                width="100%" 
                height="100%" 
                scrolling="no" 
                frameBorder="0"
            />
        );
    }
    render() {
        return (
            <div style={{maxWidth:640, width:'100%', height:'100%', overflow:'auto'}}>
                {this.renderHTMLFrame()}
            </div>
        );
    }
}

回答：

您要做的是在您的componentDidMount中，运行脚本来设置高度。[如果要加载外部内容，则可能要在IFrame上添加事件侦听器，以等待加载外部内容。

   componentDidMount() {
       const obj = ReactDOM.findDOMNode(this);
       obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }

还有另一种更“反应”的方式-将高度存储在状态中。

   componentDidMount() {
       const obj = ReactDOM.findDOMNode(this);
       this.setState({iFrameHeight:  obj.contentWindow.document.body.scrollHeight + 'px'});
    }

然后在您的渲染器中：

render() {
    return (
        <div style={{maxWidth:640, width:'100%', height:this.state.iFrameHeight, overflow:'auto'}}>
            {this.renderHTMLFrame()}
        </div>
    );
}

以上是 在ReactJS中将iframe的高度设置为scrollHeight 的全部内容， 来源链接： utcz.com/qa/420289.html

回到顶部