JS如何在不同浏览器下实现全屏

手动将浏览器全屏，大家都知道非常简单，按F11就OK了，但如果要用JS实现浏览器全屏了？

对于IE浏览器实现全屏非常简单，因为可以调用ActiveXObject对象。非IE的浏览器就无法办到了，幸好，如今是html5的时代了，我们可以使用html5提供的api实现全屏功能。直接上代码：

/**
 * 浏览器全屏api的判断
 * @returns
 */
function fsapiFun(){
	var fsapi;
    fsapi = (function () {
        var dom, enter, exit, fullscreen

        // support for entering fullscreen
        dom = document.createElement('img')
        if ('requestFullscreen' in dom) {
            enter = 'requestFullscreen' // W3C proposal
        }
        else if ('requestFullScreen' in dom) {
            enter = 'requestFullScreen' // mozilla proposal
        }
        //谷歌15，safari 1.5
        else if ('webkitRequestFullScreen' in dom) {
            enter = 'webkitRequestFullScreen' // webkit
        }
        //firefox 10
        else if ('mozRequestFullScreen' in dom) {
            enter = 'mozRequestFullScreen' // firefox
        }
        else {
            enter = undefined // not supported in this browser
        }

        // support for exiting fullscreen
        if ('exitFullscreen' in document) {
            exit = 'exitFullscreen' // W3C proposal
        }
        else if ('cancelFullScreen' in document) {
            exit = 'cancelFullScreen' // mozilla proposal
        }
        else if ('webkitCancelFullScreen' in document) {
            exit = 'webkitCancelFullScreen' // webkit
        }
        else if ('mozCancelFullScreen' in document) {
            exit = 'mozCancelFullScreen' // firefox
        }
        else {
            exit = undefined // not supported in this browser
        }

        // support for detecting when in fullscreen
        if ('fullscreen' in document) {
            fullscreen = 'fullscreen' // W3C proposal
        }
        else if ('fullScreen' in document) {
            fullscreen = 'fullScreen' // mozilla proposal
        }
        else if ('webkitIsFullScreen' in document) {
            fullscreen = 'webkitIsFullScreen' // webkit
        }
        else if ('mozFullScreen' in document) {
            fullscreen = 'mozFullScreen' // firefox
        }
        else {
            fullscreen = undefined // not supported in this browser
        }

        return {
            enter      : enter,
            exit       : exit,
            fullscreen : fullscreen
        }
    }());
    return fsapi;
}
/**
 * 实现浏览器全屏
 */
function myFullScreen(){
	var fsapi = fsapiFun();
	if(fsapi.enter){
		document.body[fsapi.enter]();
	}else{
		if(Ext.isIE){
			var WshShell = new ActiveXObject('WScript.Shell')
		      WshShell.SendKeys('{F11}');
		}
	}
	
}
/**
 * 退出浏览器全屏
 */
function myExitFullScreen(){
	var fsapi = fsapiFun();
	if(fsapi.exit){
		document[fsapi.exit]();
	}else{
		if(Ext.isIE){
			var WshShell = new ActiveXObject('WScript.Shell')
		      WshShell.SendKeys('{F11}');
		}
	}
}

对于IE浏览器的判断，我直接使用了Ext的，但大家可以自己选用jquery的或者自己实现。