如何在 React.js 中访问 iframe 的名称属性

Question

 import React, { useState, useEffect } from 'react' import "./MainText.css" import "./App.css"; import FormatColorFillIcon from '@material-ui/icons/FormatColorFill'; import BorderColorIcon from '@material-ui/icons/BorderColor'; function MainText() { function enableEditMode() { textPart.document.designMode = 'On'; } useEffect(() => { enableEditMode(); }, []) return ( <div className="mainText"> <div className="mainText__second"> <iframe name="textPart" frameBorder="0" ></iframe> </div> </div> )

I have only shown the main part of the code where I am not getting my result. I want to access the name attribute of the iframe tag but it is showing me textPart is not defined. I also tried by putting id in the iframe and doing document.getElementById but it is also not working. Help me in this.

Answer 1

I think it supposed to be like this

<iframe name={"textPart"} frameBorder="0" ></iframe>

Answer 2

You could use this to get element by name: document.getElementsByName('textPart')

So in your case the enableEditMode code will be:

  function enableEditMode() {
    const textpart = document.getElementsByName('textPart')[0];
    const iframeDocument= textpart.contentDocument || textpart.contentWindow.document;
    iframeDocument.designMode = "on";
  }

Answer 3

function MainText() {

    function enableEditMode(textPart) {
        if(!textPart){
        return;} // check for iframe content
        textPart.contentWindow.addEventListener("load", () => {
               textPart.document.designMode = 'On'; // check content iframe when iframe loaded
        });
        
    }

    useEffect(() => {
        enableEditMode();
    }, [])

    return (
        <div className="mainText">

            <div className="mainText__second">
                <iframe ref={this.enableEditMode} name="textPart" frameBorder="0" >/iframe>
            </div>
        </div>
     );

Have u tried ref to change iframe content?