随着HTML5技术和浏览器的发展,web应用程序也能像本地一样实现全屏,而且大部分浏览器都支持全屏。现在就让我们一起来探讨javascript中全屏实现。
要实现的效果:单击按钮全屏按钮,实现全屏效果,然后按钮图标变了,再次单击按钮退出全屏,按钮图标恢复原状。
全屏模式:通过Fullscreen中的requestFullScreen方法来实现。由于该方法还未标准化,各大浏览器必须加前缀
var el = document.documentElement;//全屏整个页面
var el = document.getElementById("id");//全屏某个元素
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if(typeof window.ActiveXObject != "undefined"){
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
退出全屏:使用cancelFullScreen方法(也需要加前缀才能退出相应的标准模式)
var el = document;
var rfs = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
if (typeof rfs != "undefined" && rfs) { // cancel full screen.
rfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
此时bug出现了,默哀。。。
在ie和火狐浏览器中浏览正常,此时Chrome页面css背景色用白色给覆盖了,经过调试,发现Chrome默认对全屏元素加了CSS设置,不明白Chrome此处预留接口用意何为,把这个无用的东西给覆盖掉吧
重写覆盖如果你想在全屏中更改CSS,则:
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
在ie中全屏无效,,调试看下ie报错信息,我靠!一直对IE没好感,ie提示不能创建ActiveXObject对象,经查实,原来ie把这个对象给禁用了,希望各位大侠在遇到ActiveXObject时都出现过该问题。解决办法:【工具——Internet选项——安全——自定义级别】
再不懂就看图
终于能正常全屏和退出全屏模式了,,
此时问题又来了,可还记得全屏和非全屏的时候图标是不一样的,如果我用键盘事件ESC退出全屏,我可爱的图标此时就不能切换了,
首先我想的是如果能通过屏幕的height来判断当前页面是否是全屏,然后我找到了这些:
f(document.body.scrollHeight==window.screen.height&&document.body.scrollWidth==window.screen.width){
alert('全屏窗口');
}
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
呜呜。。。各大浏览器支持层度不一样,这种只有Chrome才识别,果断放弃。。。
接着试下键盘onkeydown事件吧。
window.document.onkeydown = keyup;
function keyup(evt) {
evt = (evt) ? evt : event;
var keycode = evt.keyCode;
console.log(keycode);
}
又有bug,在全屏模式下所有键都能监听到,除了ESC,坑爹,至于为什么,智商和时间有限,搞不懂。果断换方案
用浏览器自带的监听事件吧
document.addEventListener("mozfullscreenchange", function () {
fullscreenState= (document.mozFullScreen)? "" : "not ";
}, false);
详细查看http://jingyan.baidu.com/article/cbf0e500f80c4f2eaa2893b2.html?qq-pf-to=pcqq.c2c
document.mozFullScreen全屏返回true反之false,正好解决了在ESC下的图片切换
此时如果有人问js模拟的F11和浏览器自带的F11之间如何在各大浏览器中自由切换,如果哪位大神有好的解决方案,请告知。。。