这几天尽琢磨用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.οncοntextmenu=function(e){ return false; // 主页面不允许右键(兼容多浏览器) }
参考:
1、狮子与硬币的“JS 全屏”: http://www.jianshu.com/p/624f808440ae2、CSDN中关于“JS全屏”的讨论: http://bbs.csdn.net/topics/310127040