欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS实现全屏

程序员文章站 2022-05-16 13:03:02
...

这几天尽琢磨用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