Tengo el html como a continuación:
<html> <body> <div>Welcome.</div> <iframe src='otherpagecontent' width='594' height='334'> #docuemnt <html> <body> <div style='color:yellow'> This should not show in fullscreen. </div> <div style='color:yellow'> This should not show in fullscreen. </div> <div id='fullscreen' style='color:blue;'> This should go fullscreen only. </div> <div style='color:red'> This should not show in fullscreen. </div> <div style='color:red'> This should not show in fullscreen. </div> </body> </html> </iframe> <iframe src='diffirentpage'> #docuemnt <button onclick="launchFullscreen(document.getelementByID('fullscreen'));">Launch Fullscreen</button> </iframe> </body> </html>En JS:
this.launchFullscreen= function (element) { var requestFullScreen = (element.requestFullScreen || element.mozRequestFullScreen || element.webkitRequestFullScreen || element.msRequestFullscreen); requestFullScreen.apply(element); } El resultado en Request for fullscreen was denied because of FeaturePolicy directives.
¿Cómo puedo hacer que este <div id='fullscreen'> pase a pantalla completa? ¿Debo cambiar el CSS para este <div> o vincular la solicitud desde otro lugar?
PD: Esto funciona bien en Chrome, pero ocurre un problema en Firefox.
Sí, deberías usar CSS para esto. No puede forzar al usuario a pantalla completa con F11 ; sin embargo, puede hacer que su div esté a pantalla completa usando el siguiente CSS
div {width: 100%; height: 100%;}Por supuesto, esto supondrá que su div es hijo de la etiqueta. De lo contrario, deberá agregar lo siguiente además del código anterior.
div {position: absolute; top: 0; left: 0;}Podrías probar esto
<iframe src="myurl.in" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe >de: https://www.geeksforgeeks.org/how-to-set-fullscreen-iframe/