⽤html5js实现点击⼀个按钮达到浏览器全屏效果
项⽬中需要将后台浏览器的窗⼝全屏，也就是我们点击⼀个按钮要实现按F11全屏的效果。在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页⾯中的图⽚，视频等全屏⽬前只有google chrome 15 +,
safri5.1+,firfox10+,IE11⽀持
全屏
var docElm = document.documentElement;
//W3C
if (questFullscreen) {
}
//FireFox
else if (RequestFullScreen) {
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
退出全屏
if (itFullscreen) {
}
else if (CancelFullScreen) {
}
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 = (FullScreen)? "" : "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;
}
附录jquery在线学习视频
1 ⼀个在线的Demo
2  HTML5全屏API之⽹络钓鱼
3  jquery封装的全屏插件
4  更加详细的全屏API介绍
5  HTML5全屏API在FireFox/Chrome中的显⽰差异

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。