用html5 js实现浏览器全屏
Release： 2016-05-17 09:08:08
Original
2105 people have browsed it
项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按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 of this Website
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
Latest Articles by Author
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
