1. 程式人生 > >JS如何在不同瀏覽器下實現全屏

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的或者自己實現。