//全屏
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