JS如何在不同瀏覽器下實現全屏
阿新 • • 發佈:2019-01-31
手動將瀏覽器全屏,大家都知道非常簡單,按F11就OK了,但如果要用JS實現瀏覽器全屏了?
對於IE瀏覽器實現全屏非常簡單,因為可以呼叫ActiveXObject物件。非IE的瀏覽器就無法辦到了,幸好,如今是html5的時代了,我們可以使用html5提供的api實現全屏功能。直接上程式碼:
對於IE瀏覽器的判斷,我直接使用了Ext的,但大家可以自己選用jquery的或者自己實現。/** * 瀏覽器全屏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}'); } } }