How do I bind "Exit Full Screen f11" browser button?

Question

I Created a link to go full screen with this code, from onclick go full screen

function toggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
       (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {  
      document.documentElement.requestFullScreen();  
    } else if (document.documentElement.mozRequestFullScreen) {  
      document.documentElement.mozRequestFullScreen();  
    } else if (document.documentElement.webkitRequestFullScreen) {  
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }  
  } else {  
    if (document.cancelFullScreen) {  
      document.cancelFullScreen();  
    } else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();  
    } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
    }  
  }  
}

Now, when browser is in full screen mode, how do I bind browser's "Exit full screen f11" button that pops at top of window to do something as a callback after window comes to normal mode by exiting full screen ?

score 1 · Answer 1 · answered Sep 24 '13 at 13:09

1

Try this -

var fullScreen = 0;
$( window ).keydown(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 122) {
        if(fullScreen == 1) {
            ....
            //your code goes here
            ....
        }
        fullScreen = (fullScreen == 1) ? 0 : 1;
    }
});

I think this should work in most browser

answered Sep 24 '13 at 13:09

Gupta.Swap

265
3
14

please accept this answer if it solves your question... meanwhile i'll try to test it on different browsers... – Gupta.Swap Sep 24 '13 at 13:20
Actually, I used this and other alternatives such as clicking ESC button. But i wanted to bind click that exit full screen button. – Vishal Kumar May 14 '15 at 06:29

score 1 · Accepted Answer · answered May 14 '15 at 06:37

1

After researching, I found that it is not possible to bind that button. Since that is browser's native button, which is out of scope of DOM.

So, Use keypress event listener's instead.

answered May 14 '15 at 06:37

Vishal Kumar

330
1
9

How do I bind "Exit Full Screen f11" browser button?

2 Answers2