Home > Article > Web Front-end > 用html5 js实现浏览器全屏

用html5 js实现浏览器全屏

WBOYOriginal: 2016-05-17 09:08:082030browse

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按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();
}
//IE11
else 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.m**itFullscreen) {
document.m**itFullscreen();
}

复制代码

事件监听

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：7款HTML5精美应用教程让你立即爱上HTML5Next article：怎样制作单页网站？国外优秀案例给你灵感

See more

用html5 js实现浏览器全屏

Related articles