用html5 js实现浏览器全屏
Freigeben: 2016-05-17 09:08:08
Original
2082 Leute haben es durchsucht
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按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
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
-
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