点击一个按钮要实现按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/

最新资讯
要求学生把手机泡水盆里?老师:是一场“苦肉计”

要求学生把手机泡水盆

发现弟弟的班主任在班级的微信群里发了一张图片,若干部
科学家揭秘巨石阵 DNA测序显示当时为父系社会

科学家揭秘巨石阵 DNA

本报讯 考古学家一直对散布在北欧各地的巨石墓地感到
专家在香山科学会议呼吁:中国引力波探测应合力攻关

专家在香山科学会议呼

通过为期两天的讨论,与会专家认为,为保证我国引力波探测
雄安新区能源互联网标准化试点工作启动

雄安新区能源互联网标

近日,雄安新区能源互联网标准化试点工作正式启动。
快递员私拆女客户包裹、信息骚扰 顺丰:已启动调查

快递员私拆女客户包裹

有微博网友发文称顺丰快递员私自打开客户包裹、发信息
不靠病毒潜入体内 “上帝的手术刀”更安全

不靠病毒潜入体内 “

在把CRISPR-Cas9送到细胞中时,需要借助载体的帮助。其
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编