CODEWITHSUNDEEP
javascriptfullscreenasp.net-web-api
user2587132
user2587132

Reputation:

How to detect 'going into' fullscreen mode? - Fullscreen Web API

I'm using the Fullscreen Web API. 

  function goFullscreen(){

     var elem =  document.body;
     if (elem.requestFullscreen)  elem.requestFullscreen();
     else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen();
     else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen(); 

     var fullscreenElement = document.mozFullScreenElement;   
     if(fullscreenElement){
     /** some changes to the page **/
     }     
   }

And I used the document.mozFullScreenElement to check whether the page is fullscreen or not.

But, that check works only when the page is ALREADY fullscreen not when it goes fullscreen (that is when user clicks "Allow"). So, Is there any hack for this?

Upvotes: 3

Views: 3498

Answers (3)

Chris Halcrow
Chris Halcrow

Reputation: 31950

Use this if statement cross browser to detect if we're not currently in full screen mode:

            if (
                !document.isFullScreen &&
                !document.fullscreenElement &&
                !document.webkitFullscreenElement &&
                !document.mozFullScreenElement &&
                !document.msFullscreenElement
            )
            { // make full screen }

Upvotes: 1

Stephen James
Stephen James

Reputation: 1287

I found a really good post on this http://xme.im/display-fullscreen-website-using-javascript which has a good overview of support in different browsers. Also goes on to suggest some events that can be used.

If that doesn't work I suppose a (nasty-ish) hack would be introducing an setInterval poll that checks for fullscreen and if true fires a custom event and clears the interval?

EDIT...

I had a play around with the above code in the article and agree it doesn't solve the issue. Also size based detection of whether in full screen mode behaves unpredictably in some cases.

Overall with browser behaviour it seems that it is considered "full screen" the moment it goes full screen (in the case of Chrome, this is before the user clicks Allow). The following code allowed me to detect this with no delays/intervals necessary, but since the user can still exit full screen mode at any time (via Deny or browser controls) you'd still have to tear down any page changes you made on entering full screen. I think since there are no events we have to treat Deny the same as a normal exit. Code below is webkit only, but could easily be adapted with alt prefixes/pseudo classes.

<html>
<head>
    <style>
        html, body { height : 100%; width : 100%; }
    </style>        
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        document.addEventListener("webkitfullscreenchange", function () {
            var isFullScreen = $("body:-webkit-full-screen").length;
            document.getElementById("status").innerHTML = (isFullScreen)? "I am full screen" : "I am NOT full screen";          
        }, false);

    </script>
</head>
<body>
    Hello
    <div id="status"></div>
    <button onclick="document.body.webkitRequestFullScreen()">&nbsp;Request FullScreen&nbsp;</button>       
</body>

Upvotes: 0

Vincent Hogendoorn
Vincent Hogendoorn

Reputation: 710

Another option is to do those checks like you did, but instead going fullscreen, call the function which is doing some changes on the page, and after that going to full screen:

so as example:

 function goFullscreen(){
   var elem =  document.body;
   if (elem.requestFullscreen) 
    changeContent("requestFullscreen")
   else if (elem.mozRequestFullScreen) 
    changeContent("mozRequestFullScreen")
   else if (elem.webkitRequestFullscreen) 
    changeContent("webkitRequestFullscreen")
 }

 function changeContent(fullScreenType) {
   var elem =  document.body;
   /** some changes to the page, **/

    /** after those changes, do the check and go fullscreen **/
   if (fullScreenType == "requestFullscreen")
    elem.requestFullscreen();
   else if (fullScreenType == "mozRequestFullscreen")
    elem.mozRequestFullscreen();
   else if (fullScreenType == "webkitRequestFullscreen")
    elem.webkitRequestFullscreen();

 }

Upvotes: 0

Related Questions