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. Unsere Datenschutzbestimmungen können Sie hier nachlesen