1

I have the html like below:

<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='differentpage'>
        #docuemnt
        <button onclick="launchFullscreen(document.getelementByID('fullscreen'));">Launch Fullscreen</button>
      </iframe>
   </body>
</html>

In JS:

this.launchFullscreen= function (element) {
    var requestFullScreen = (element.requestFullScreen || element.mozRequestFullScreen || element.webkitRequestFullScreen || element.msRequestFullscreen);
    requestFullScreen.apply(element);
}

Result in Request for fullscreen was denied because of FeaturePolicy directives.

How can I get this <div id='fullscreen'> to go fullscreen? Should I change the CSS for this <div>, or bind the request from somewhere else?

PS: This work fine on Chrome, but issue occur on Firefox.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Light Note
  • 25
  • 4

2 Answers2

2

Yes, you should use CSS for this. You can't force the user into full-screen by F11; however, you can make your div full screen by using the following CSS

div {width: 100%; height: 100%;}

This will of course assume your div is child of the tag. Otherwise, you'd need to add the following in addition to the above code.

div {position: absolute; top: 0; left: 0;}

from:How do I make a div full screen?

Maxim Kuskov
  • 250
  • 1
  • 5
  • Sorry, but firefox have strictly fullscreen CSS `:not(:fullscreen)` and I don't quite know how to apply this CSS. Beside that, can we make a postMessage to reach cross-orign from internal iframe? – Light Note Aug 05 '21 at 08:19
1

You might try this

<iframe src="myurl.in"
frameborder="0" 
marginheight="0" 
marginwidth="0" 
width="100%" 
height="100%" 
scrolling="auto"></iframe >

from: https://www.geeksforgeeks.org/how-to-set-fullscreen-iframe/

3n6in33r
  • 85
  • 8