Wie kann ich die Höhe eines iframes in Abhängigkeit von dem Inhalt in ReactJS setzen?

Jul 3 (14:35)

Ich habe ein iframe in das ich über die srcDoc={ html } Eigenschaft einen HTML-Inhalt anzeigen kann. Ich kann über die style Eigenschaft eine feste Höhe in Pixeln setzen, ich würde das aber lieber auf die Höhe des Inhaltes ausdehnen.

render() {
    return <iframe srcDoc={ html } style={{ width: '100%', height: '200px' }} ></iframe>;
}

Wie kann ich das mit React machen?

Alle Kommentare
matthias Jul 4 (12:05)

Die Höhe des iframe setzt man am besten in dem onLoad Callback, hier eine einfache Komponente zur Demonstration:

interface IState {
    iframeHeight: number;
}

interface IProps {
    html: string
}

export class IFrameComponent extends React.Component<IProps, IState> {

    iframeRef;

    constructor(props) {
        super(props);

        this.state = {
            iframeHeight: 0
        }

        this.iframeRef = React.createRef();
    }

   render() {
        const { iframeHeight } = this.state;
        const { html } = this.props;
        const style = { width: '100%', height: iframeHeight + 'px' };

        return (
            <section>
            <iframe ref={ this.iframeRef } 
                srcDoc={ html } 
                style={ style } 
                onLoad={ () => this.iframeOnLoad() }>
            </iframe>
            </section>
        );
    }

    private iframeOnLoad() {
        const iframeNode = this.iframeRef.current;
        const iframeHeight = (iframeNode as any).contentWindow.document.body.scrollHeight;
        this.setState({ iframeHeight });
    }
}

Um die Höhe des iframe-Nodes zu bekommen, brauchen wir erstmal eine Referenz auf das Node im Html. Das kriegt man über this.iframeRef = React.createRef() im Konstruktor und <iframe ref={ this.iframeRef } ...>...</iframe> in der render Methode.

Jetzt können wir in dem onLoad Callback iframeOnLoad die Höhe des iframes ablesen und über setState die style-Eigenschaft des iframes mit der aktuellen Höhe aktualisieren.

0 0 0
Noch keine Stimmen abgegeben
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Genauere Informationen finden Sie in unserer Datenschutzerklärung sowie im Impressum.