IE、FireFox、Chrome浏览器的全屏实现

来源：互联网发布：淘宝送赠品编辑：程序博客网时间：2024/04/26 19:38

随着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之间如何在各大浏览器中自由切换，如果哪位大神有好的解决方案，请告知。。。

0 0