How to Detect When a Page Exits Fullscreen

How to detect when a page exits fullscreen?

The Fullscreen spec specifies that the "fullscreenchange" (with the appropriate prefix) event is fired on the document any time the fullscreen state of the page changes, that includes going into and out of full screen. Inside that event you can check document.fullScreenElement to see if the page is fullscreen or not. If it's fullscreen the property will be non-null.

Check out MDN for more details.

As for your other questions: No, there is no way to prevent Esc from exiting fullscreen. That's the compromise that was made to ensure that the user always has control over what their browser is doing. The browser will never give you a way to prevent users from exiting fullscreen. Period.

As for Firefox being slower at rendering than Chrome, I can assure you that for most practical purposes it's not. If you're seeing a large difference in performance between the two browsers that probably means your javascript code is the bottleneck, not the GPU.

Detect fullscreen mode

As you have discovered, browser compatibility is a big drawback. After all, this is something very new.

However, since you're working in JavaScript, you have far more options available to you than if you were just using CSS.

For example:

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

You can also check for some slightly more loose comparisons:

if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
    // browser is almost certainly fullscreen
}

jQuery: How to execute code when exiting fullscreen mode with escape button?

Depending on which browser you are using you will need to bind the appropriate prefix. You can detect the event screenchange and if it has changed you need to poll whether it is currently in fullscreen or not. The fullscreen property is always bound to the document so that is what you can use to check the current state and use it to fire the events accordingly. The following snippet binds to all major browser and detects in all major browsers. Note: these events are not available in ios

$(el).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
    alert('Event: ' + event);    
});

Further reading on this http://davidwalsh.name/fullscreen

Detect if user exits full screen video with jQuery

I would assume this would depend on the player you are using for video. I would check the documentation which refers to that video player. A simple Google search got me these results: https://www.google.com/search?q=detect+if+full+screen+video+jquery&ie=utf-8&oe=utf-8

    // Entering fullscreen mode
    $('video#my-video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
        var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        var event = state ? 'FullscreenOn' : 'FullscreenOff';

       // Now do something interesting
       //alert('Event: ' + event); 

    if (event == "FullscreenOn"){
    //do something when fullscreen on

    }


    });

How to detect if user has enabled full screen in browser

You can compare the sreen width to the browser width, or height.

if (screen.width == window.innerWidth && screen.height == window.innerHeight) {
    //full web browser
}

EDIT : Be carefull in chrome if user have download manager, translate bar or element inspercter open the height is different to the sreen.

---

Related Topics