Hello. I've made an attempt to provide cross-browser solution to controlling full-screen mode.
Following is the solution so far ( combining all resources i could find and personal touches ).
Works on:
Win7 [ IE9, Firefox 18, Chrome 24, Safari 5.1, Opera 12.12 ]
Hope it helps anyone.
I'll be very thankfull for any corrections , feedback or test results ( and will update the script of course ).
resources:
http://stackoverflow.com/questions/1...ver-the-screen
https://hacks.mozilla.org/2012/01/us...-web-browsers/
http://stackoverflow.com/questions/1...ll-screen-mode
http://stackoverflow.com/questions/2...-in-fullscreen
http://johndyer.name/native-fullscre...jquery-plugin/
http://www.paulund.co.uk/javascript-full-screen-api
Code:
/**
* Check if window is in full screen mode.
* @return {Boolean} full screen mode
*/
isInFullScreen: function(){
if(document.fullScreenElement !==undefined){
return !!document.fullScreenElement;
}
if(document.mozFullScreen !== undefined){
return !!document.mozFullScreen;
}
if(document.webkitIsFullScreen !== undefined){
return !!document.webkitIsFullScreen;
}
if(window['fullScreen'] !== undefined) {
return !!window.fullScreen;
}
if(window.navigator.standalone !== undefined){
return !!window.navigator.standalone;
}
//________________________________________________________
// heuristic method
// 5px height margin, just in case (needed by e.g. IE)
var heightMargin = 5;
if(Ext.isWebKit && /Apple Computer/.test(navigator.vendor)) {
// Safari in full screen mode shows the navigation bar,which is 40px
heightMargin = 42;
}
return screen.width == window.innerWidth &&
Math.abs(screen.height - window.innerHeight) < heightMargin;
},
/**
* Switch to/from fullscreen mode.
* Must be triggered by mouse event
*
* @param {Boolean} b on/off fullscreen
*/
setFullScreen: function(b){
if(b){
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.body.requestFullscreen) {
document.body.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (document.body.webkitRequestFullScreen) {
document.body.webkitRequestFullScreen();
} else if(typeof window.ActiveXObject != "undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if(wscript != null){
wscript.SendKeys("{F11}");
}
}
}else{
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if(document.exitFullscreen){
document.exitFullscreen();
} else if(typeof window.ActiveXObject != "undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if(wscript != null){
wscript.SendKeys("{F11}");
}
}
}
},
/**
* Toggle full screen mode.
* @return {Boolean} the new full-screen mode
*/
toggleFullScreen:function(){
var isInFullScreen = this.isInFullScreen();
this.setFullScreen(!isInFullScreen);
return this.isInFullScreen();
}