JS实现全屏

这几天尽琢磨用JS实现全屏全屏了，折腾了好几天都没达到我要的效果，最后只能放弃了。虽说如此，折腾过程还是要贴贴的。

声明：所谓的全屏，就是在浏览器中按了F11的效果，什么菜单栏工具栏状态栏一律消失，就剩下“可视内容所在页面”占据整个屏幕。

一、通过调节window的宽和高实现全屏：

var aw = screen.availWidth;
var ah = screen.availHeight;
window.moveTo(0, 0);
window.resizeTo(aw, ah);

缺点：这是屏幕最大化，效果为点了浏览器右上角“最大化”按钮，页面铺满整个屏幕，菜单栏地址栏什么的该有还有，所以这不是全屏。

优点：可以自动最大化。

注意点：使用最大化，通常都是在打开页面的时候直接最大化，实现方式自然是页面加载的时候自动最大化，大家容易想到的无外乎是将以上代码放在body的onload()或者Jquery的$(function())方法中这样子已加载就可以看到最大化了。实则不然，onload()和$(function())的本质含义是页面加载完成后再执行，而我们的自动最大化可不是加载完成才最大化，而是先保证最大化然后加载数据。怎么调整呢？很简单，新建一个script标签，将以上代码拷贝其中并将该script标签放到所有的script标签之前，也就是将：

<script type="text/javascript">
	var aw = screen.availWidth;
	var ah = screen.availHeight;
	window.moveTo(0, 0);
	window.resizeTo(aw, ah);
</script>

放到所有的script标签之前。按到代码的执行顺序，加载完成这个效果真后才会加载页面数据。

二、使用ActiveXObject控件模拟F11的效果：

var wsh = new ActiveXObject("WScript.Shell"); 
wsh.sendKeys("{F11}");

优点：可以实现全屏，且能自动全屏

缺点：仅限IE系列，版本IE10以下版本，浏览器必须允许执行ActiveXObject控件，且将鼠标放到最顶端时浏览器的基本信息还是会出来也能放大缩小，再次按F11时会退出全屏。

注意点：这种方法使用ActiveXObject控件，ActiveXObject控件有以下要求：

a、ActiveXObject只有IE系列才兼容，其他浏览器都不能用；

b、要想用ActiveXObject控件，需要设置浏览器的安全级别，如启用“对未标记为可安全执行脚本的ActiveX控件执行脚本”等；

c、即便启用ActiveXObject控件，每次加载该控件时都会弹框确认，且这种确认只能手动不能自动，若不允许执行ActiveXObject则该功能不能用。

d、IE版本越往上对ActiveXObject控件的支持越若，如IE6里面可以直接启动该控件，IE8中只能标记为“提示”否则会自动设为禁用，IE11中使用ActiveXObject根本没反应。

所以用这种方法可谓是一步一个劫啊！

三、使用window.open打开新的页面实现全屏：

window.open()的第三个参数可以设置新的窗口菜单栏地址栏状态等的状态，也可以设置为全屏模式。

var x = screen.availWidth;
var y = screen.availHeight;
  
//打开新的窗口
window.open(url,"makeful",   'fullscreen=yes,channelmode=yes,titlebar=no,toolbar=no,scrollbars=auto,resizable=no,status=no,copyhistory=no,location=no,menubar=no,width='+x+',height='+y);
window.close();//关闭当前窗口

优点：可以实现全屏，且能自动全屏

缺点：必须打开一个新的窗口

a、若是在原来的窗口打开新的窗口，新的窗口菜单栏状态的状态与原窗口一致，该显示还是显示。打开成_blank窗口才能全屏。

b、打开新的窗口以后调用window.close()关闭原来老的窗口，老窗口可以关闭，但是每次都会弹出确认框让确认是否关闭选项卡，不允许关闭的话原来的窗口依旧开着，并且这个弹出框不能人为的禁掉不让弹出。光想想"打开一个程序需要开两个窗口"、"访问的是一个页面看结果确是在另一个页面"都觉得不太对头。

c、上面的测试是在Html页面进行的，若将html页面改成JSP页面发布到项目中，其全屏模式跟静态html看到的全屏模式不一样，html页面出来内容浏览器的其他信息都看不到，JSP页面中则还会地址栏（地址栏不可编辑）和地址栏以上的部分，可以手动放大缩小窗口。按理说这应该不算全屏吧。

四、使用fullScreen API实现全屏：

//全屏
function fullScreen() { 
  var element= document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
  //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"); 
  //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();  
  } 
}

优点：支持较多浏览器，且全屏效果好。它有使用ActiveXObject，因此IE10以下版本可以用，document.msExitFullscreen()可以支持IE10及以上版本，Chrome 15 / Firefox Nightly / Safari 5.1也支持FullScreen Javascript API，因此这个方法兼容性还是很不错的。

缺点：

a、因为使用ActiveXObject控件，因此自然会有使用ActiveXObject的缺点，上面有说过这里就不累述了

b、只能手动，不能自动。只能手动点击按钮或A标签来调用全屏和退出全屏的方法，模拟点击不起做用。因此也不能实现自动全屏的效果。

其他：这里记录一下测试用到的一些方法，如模拟点击、禁止右键。

//模拟点击
var fullscreenBtn = document.getElementById("btnFullScreen");
try{
	fullscreenBtn.fireEvent("onclick");
}catch(e){
	var  evt   =   document.createEvent('HTMLEvents');            
	evt.initEvent('click',true,true); 
	fullscreenBtn.dispatchEvent(evt);  
}

//禁止右键
document.oncontextmenu=function(e){
	return false; // 主页面不允许右键（兼容多浏览器）
}

参考：

1、狮子与硬币的“JS 全屏”： http://www.jianshu.com/p/624f808440ae
2、CSDN中关于“JS全屏”的讨论： http://bbs.csdn.net/topics/310127040

猜你喜欢