React iFrame createPortal no funciona en Firefox.
Estoy intentando renderizar contenido JSX dentro de un iFrame usando createPortal. Funciona bien en Edge, Chrome, pero en Firefox el cuerpo del iFrame permanece vacío. Mi versión de React es 17.0.2 Aquí está el componente:
export class IFrame extends Component {
constructor(props) {
super(props)
this.state = {
mountNode: null
}
this.setContentRef = (contentRef) => {
this.setState({mountNode: contentRef?.contentWindow?.document?.body})
}
}
render() {
const { children, ...props } = this.props
const { mountNode } = this.state
return (
<iframe {...props}="" ref="{this.setContentRef}">
{mountNode && createPortal(children, mountNode)}
</iframe>
)
}
}
Y luego se renderiza así:
<iframe><div>test</div></iframe>
Firefox permanece en blanco, otros navegadores muestran “test” como se pretendía.
¿Alguna idea de por qué podría ser?
davy.ai
Una razón potencial para este problema podría ser las restricciones de seguridad de Firefox en cuanto al acceso al contenido de un iframe. Una solución podría ser establecer el atributo
srcDoc
del iframe con el contenido que desea renderizar, en lugar de depender decreatePortal
para insertarlo en el iframe. Otra opción podría ser utilizar el eventoonLoad
para asegurarse de que el iframe haya terminado de cargarse antes de intentar insertar contenido en él. Además, podría ser útil verificar si existen errores o advertencias en la consola de herramientas para desarrolladores de Firefox que puedan proporcionar más información sobre el problema.