CODEWITHSUNDEEP
javascriptreactjsnext.js
CodeRocks
CodeRocks

Reputation: 715

document.getElementById for iFrame in ReactJS

In my site, I need to send information (via postMessage) to an iFrame. I know in regular Javascript, I would accomplish this by using document.getElementById or $("#iframe") in JQuery to select the iframe. However, I am unsure of how to do this in ReactJS. Is there a specific way of doing this in ReactJS/NextJS that I just don't know about? I need access to the iframe (the child component) from its container (parent component).

Upvotes: 1

Views: 3791

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075427

If the iframe is rendered by React, and only the component that renders it (or its descendants) needs to access it, then typically you use refs.

If the iframe is always on the page, or rendered in some way outside of React, it's perfectly fine to get it via document.getElementById, document.querySelector, or other DOM methods.

Here's an example of using a ref in a functional component via useRef, but you can do the same thing (in a different way) in a class component via createRef. I'll use a div instead of an iframe, but it's the same for iframes.

function Example() {
    const ref = React.useRef(null);
    
    const doSomething = () => {
        if (ref.current) {
            console.log(`The div's text is "${ref.current.textContent}"`);
        } else {
            console.log("The div doesn't exist");
        }
    };
    
    return (
        <div>
            <div ref={ref}>
            This is the target div
            </div>
            <input type="button" onClick={doSomething} value="Click Me" />
        </div>
    );
}

ReactDOM.render(<Example/>, document.getElementById("root"));
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Class component example:

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.doSomething = this.doSomething.bind(this);
    }
    
    doSomething() {
        if (this.ref.current) {
            console.log(`The div's text is "${this.ref.current.textContent}"`);
        } else {
            console.log("The div doesn't exist");
        }
    }
    
    render() {
        return (
            <div>
                <div ref={this.ref}>
                This is the target div
                </div>
                <input type="button" onClick={this.doSomething} value="Click Me" />
            </div>
        );
    }
}

ReactDOM.render(<Example/>, document.getElementById("root"));
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Upvotes: 1

Related Questions