I implemented a fullscreen toggling feature for my application and it is actually working fine, tested on newest Chrome, Firefox, IE and Opera. I have one method for activating and one for deactivating fullscreen mode:
public deactivateFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
document.webkitCancelFullScreen();
} else if (element.mozRequestFullScreen) {
document.mozCancelFullScreen();
}else if(element.msRequestFullscreen){
document.msExitFullscreen();
}
}
public activateFullscreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}else if(element.msRequestFullscreen){
element.msRequestFullscreen();
}
}
So when triggered from UI they both work fine. The only problem is once I enter fullscreen mode using F11
I cannot exit it using the deactivateFullscreen
function. As far as I understand it for the browser no flag is set once I hit F11
. I tried to test it using the following method:
public isFullscreen(element) {
if(element.webkitIsFullScreen || element.mozFullscreen || element.msFullscreenElement || element.fullscreenElement || element.fullscreen || element.webkitFullscreenElement || element.mozFullScreenElement){
return true;
}
return false;
}
This always returns false, no matter whether I am in fullscreen or not. Is there any other way to detect if I the browser is currently in fullscreen mode? Or am I missing on some concept here?
Another thing I tried is to catch the keydown event for F11
and prevent its default action.
$document.on('keydown',this.fsHandle);
public fsHandle(event:KeyboardEvent){
if(event.keyCode == 122){
event.preventDefault();
this._isFullscreen = !this._isFullscreen;
}
}
Using this method I expected to supress any F11
events in order to process the fullscreen toggling manually via code. Unfortunately this also does not work. The reason seems a little odd, the keydown-event is simply not triggered while I am already in fullscreen. Hence I can supress the event outside the fullscreen mode but not once I entered it.
Update: Some research showed that security concerns of browser vendors are the reason for this behaviour. Still there has to be a way to handle this kind of features.