点击一个按钮要实现按F11全屏的效果。在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果

项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持

全屏

var docElm = document.documentElement;//W3C if (docElm.requestFullscreen) {   docElm.requestFullscreen(); }//FireFox else if (docElm.mozRequestFullScreen) {   docElm.mozRequestFullScreen(); }//Chrome等 else if (docElm.webkitRequestFullScreen) {   docElm.webkitRequestFullScreen(); }//IE11else if (elem.msRequestFullscreen) { elem.msRequestFullscreen();}

退出全屏 

 if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } 

事件监听

document.addEventListener("fullscreenchange", function () { fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); document.addEventListener("mozfullscreenchange", function () { fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); document.addEventListener("webkitfullscreenchange", function () { fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); document.addEventListener("msfullscreenchange", function () { fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false); 

全屏样式设置

在浏览器全屏的使用我们还可以进行样式设置

html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; } html:fullscreen { background: red; } 

附录

1 一个在线的Demo

  http://robnyman.github.io/fullscreen/

2 HTML5全屏API之网络钓鱼

  http://www.36ria.com/5807

3 jquery封装的全屏插件

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4  更加详细的全屏API介绍

  4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

  4.2  https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

5  HTML5全屏API在FireFox/Chrome中的显示差异

   http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

最新资讯
史玉柱难退休,巨人网络不服老

史玉柱难退休,巨人网络

目前巨人网络内生游戏主业的创新仍未取得太多成绩,加上
学了三年的东西,为什么高考完就忘了?

学了三年的东西,为什么

遗忘是记忆系统的一个重要组成成分,绝大多数人都无法做
男性、高龄、糖尿病、非白人族裔均是新冠死亡高危因素

男性、高龄、糖尿病、

新冠最新发现!1700万人数据揭示新冠肺炎相关死亡的影响
五月天陈奕迅线上演唱会刷屏背后

五月天陈奕迅线上演唱

6点,晨光熹微,香港维多利亚港畔,音乐响起。
恒星赤道低温,行星两个夏季:"最热行星"所在系统,为何如此奇特

恒星赤道低温,行星两

通过勘测卫星对一颗距离地球670光年的系外行星的细致
乘风破浪的B站,何时能占据C位?

乘风破浪的B站,何时能

这半年来,B站乘风破浪,热点不停。7月9日,路透社援引知情
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大