//全屏function fullScreen() { //var element= document.documentElement; //若要全屏页面中div,var element= document.getElementById("divID"); var element= document.getElementById("fullScreen_panorama"); //IE 10及以下ActiveXObject if (window.ActiveXObject) { var WsShell = new ActiveXObject('WScript.Shell'); WsShell.SendKeys('{F11}'); //写全屏后的执行函数 } //HTML W3C 提议 else if(element.requestFullScreen) { element.requestFullScreen(); //写全屏后的执行函数 } //IE11 else if(element.msRequestFullscreen) { element.msRequestFullscreen(); //写全屏后的执行函数 } // Webkit (works in Safari5.1 and Chrome 15) else if(element.webkitRequestFullScreen ) { element.webkitRequestFullScreen(); //写全屏后的执行函数 } // Firefox (works in nightly) else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); //写全屏后的执行函数 }}//退出全屏function fullExit(){ //var element= document.documentElement;//若要全屏页面中div,var element= document.getElementById("divID"); var element= document.getElementById("fullScreen_panorama"); //IE ActiveXObject if (window.ActiveXObject) { var WsShell = new ActiveXObject('WScript.Shell'); WsShell.SendKeys('{F11}'); //写退出全屏后的执行函数 } //HTML5 W3C 提议 else if(element.requestFullScreen) { document.exitFullscreen(); //写退出全屏后的执行函数 } //IE 11 else if(element.msRequestFullscreen) { document.msExitFullscreen(); //写退出全屏后的执行函数 } // Webkit (works in Safari5.1 and Chrome 15) else if(element.webkitRequestFullScreen ) { document.webkitCancelFullScreen(); //写退出全屏后的执行函数 } // Firefox (works in nightly) else if(element.mozRequestFullScreen) { document.mozCancelFullScreen(); //写退出全屏后的执行函数 }}
此方法亲身实践过,有效
下面这个方法未实践,不知是否有效
让用户端JS触发指的就是让用JS监听用户的操作事件,通过JS程序去实现F11全屏。这个事件可以是一个按钮的点击事件,当然也可以是键盘事件,比如用户按下F11。
1.F11键盘事件触发 当用户按下F11事件,浏览器为触发自身全屏功能,这个过程我们一般是不可控制的,即使是监听了F11的键盘事件,退出全屏的时候,我们也捕捉不到退出全屏触发的事件。所以,我们就用程序自己去实现F11的功能,首先需要禁用浏览器默认的事件动作。1 $(document).on('keydown', function (e) { 2 var e = event || window.event || arguments.callee.caller.arguments[0]; 3 if(e && e.keyCode == 122){//捕捉F11键盘动作 4 e.preventDefault(); //阻止F11默认动作 5 var el = document.documentElement; 6 var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API //执行全屏 7 if (typeof rfs != "undefined" && rfs) { 8 rfs.call(el); 9 } else if(typeof window.ActiveXObject != "undefined"){10 var wscript = new ActiveXObject("WScript.Shell");11 if (wscript!=null) {12 wscript.SendKeys("{F11}");13 }14 } //监听不同浏览器的全屏事件,并件执行相应的代码15 document.addEventListener("webkitfullscreenchange", function() {//16 if (document.webkitIsFullScreen) {17 //全屏后要执行的代码18 }else{19 //退出全屏后执行的代码20 }21 }, false);22 23 document.addEventListener("fullscreenchange", function() {24 if (document.fullscreen) {25 //全屏后执行的代码26 }else{27 //退出全屏后要执行的代码28 }29 }, false);30 31 document.addEventListener("mozfullscreenchange", function() {32 if (document.mozFullScreen) {33 //全屏后要执行的代码34 }else{35 //退出全屏后要执行的代码36 }37 }, false);38 39 document.addEventListener("msfullscreenchange", function() {40 if (document.msFullscreenElement) {41 //全屏后要执行的代码42 }else{43 //退出全屏后要执行的代码44 }45 }, false)46 }47 }
参考文献:http://www.webhek.com/post/fullscreen.html
http://www.cnblogs.com/scot/p/5552051.html