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

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>
)

我只显示了代码中没有得到结果的主要部分。我想访问iframe标记的name属性，但它显示textPart没有定义。我也尝试过在iframe中放入id并执行document.getElementById，但它也不起作用。帮我一把。

Answer 1

您可以使用它按名称获取元素：document.getElementsByName('textPart')

因此，在您的情况下，enableEditMode代码将是：

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

Answer 2

我认为应该是这样的

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

Answer 3

函数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>
);

你是否尝试过ref更改iframe内容？