项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持
全屏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var docElm = document.documentElement; //W 3 C
if (docElm.requestFullscreen) { docElm.requestFullscreen();
} //FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen();
} //Chrome等 else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen();
} //IE 11
else if (elem.msRequestFullscreen) { elem.msRequestFullscreen();
} |
退出全屏
1
2
3
4
5
6
7
8
9
10
11
12
|
if (document.exitFullscreen) { document.exitFullscreen();
} else if (document.mozCancelFullScreen) { document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) { document.msExitFullscreen();
} |
事件监听
1
2
3
4
5
6
7
8
9
10
|
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);
|
全屏样式设置
在浏览器全屏的使用我们还可以进行样式设置
1
2
3
4
5
6
7
8
9
10
11
|
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之网络钓鱼
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/
相关推荐
HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码
js全屏弹窗代码.html
html5 全屏3D大雪花飘落动画特效,兼容性好。全屏逼真雪花飘落特效,可随鼠标移动。
js 特效 html 特效 全屏打开窗口 js 特效 html 特效 全屏打开窗口
点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果
这是一款类似百度问卷调查效果的html5全屏单页分步问卷调查表模板。每页一个问题,填写答案后才可以继续下一页,是一款很实用的html5问卷调查表模板。
利用JavaScript和Html5提供的一些API进入全屏,JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境...
HTML5全屏幻灯片切换特效是一款超酷响应式图片全屏切换特效。
HTML5 Canvas全屏烟花动画特效是一款生日快乐祝福全屏烟花动画特效。
js 特效 html 特效 浏览器全屏显示 js 特效 html 特效 浏览器全屏显示
超强的javascript html5 下的游戏 得在支持Html5的浏览器下运行
点击让浏览器网页进入全屏和退出全屏,jq插件,需加载jquery
html5全屏响应式打开窗口遮罩动画特效
HTML5实现全屏烟花特效,canvas3D动画效果,享受烟花绽放的美丽! HTML5实现全屏烟花特效,canvas3D动画效果,享受烟花绽放的美丽! HTML5实现全屏烟花特效,canvas3D动画效果,享受烟花绽放的美丽! HTML5实现全屏...
HTML5全屏宇宙星空星系旋转canvas特效动画背景js效果
html5 threecanvas.js全屏3D大雪花飘落动画特效 导入后直接使用,经过二次开发补充参数配置,开发基本够用了 效果:http://www.api1000.com
7款HTML5 Canvas全屏背景动画特效是一款酷炫的全屏背景动画特效下载。
js 特效 html 特效 打开真正的全屏窗口 js 特效 html 特效 打开真正的全屏窗口
HTML5全屏多版面切换幻灯片代码是一款简单的响应式幻灯片组件与多个版面结合的幻灯片布局和效果。
HTML5全屏焦点图片3D立方体翻转特效 HTML5全屏焦点图片3D立方体翻转特效