Soy nuevo en escribir código UI y React, comencé con un error en nuestro producto, donde las políticas de características (consulte Uso_de_Política_de_características ) no funcionan cuando reemplazo iFrame.contentWindow.location con mi URL de iFrame, que admite esa característica.

Por ejemplo, si quiero usar la API de bloqueo de activación, que es compatible con mi otro servicio, que se ejecuta en, por ejemplo, http://localhost:3000, esto es lo que tengo en mi componente React:

 function App() { useEffect(() => { let iframeRef = document.getElementById('iframe'); iframeRef.contentWindow.location.replace('http://localhost:3000'); }); return ( <div> <iframe id = 'iframe' allow='screen-wake-lock'/> </div> ); }

Cuando hago lo anterior, me sale este error:

 Screen Wake Lock Error: NotAllowedError: Failed to execute 'request' on 'WakeLock': Access to Screen Wake Lock features is disallowed by permissions policy

Claramente, parece que el iframe no obtiene el permiso requerido 'screen-wake-lock' que habilité en el iframe, en mi código, en el atributo allow.

Sin embargo, cuando inspecciono el iframe en la consola de desarrollo, veo que la lista de permitidos tiene esta característica:

 <iframe id="iframe" allow="screen-wake-lock"></iframe>

Ahora, si cambio el código a lo siguiente:

 function App() { useEffect(() => { let iframeRef = document.getElementById('iframe'); iframeRef.src = 'http://localhost:3000'; }); return ( <div> <iframe id = 'iframe' allow='screen-wake-lock'/> </div> ); }

Simplemente funciona. Me preguntaba cuál es la diferencia y cómo hago para que mi función funcione en el iframe cuando uso contentWindow.location.replace.