HTML5实现全屏API【进入和退出全屏】
2020-11-19 11:34
标签：style blog class code java color 现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样： 【进入和退出全屏】 // Webkit (works in Safari5.1 and Chrome
15) 【兼容解决方案】 注：可能出于安全考虑，只能手动触发才能实现全屏，浏览器自动执行无效果。 【实例】 HTML5实现全屏API【进入和退出全屏】,搜素材,soscw.com HTML5实现全屏API【进入和退出全屏】 标签：style blog class code java color 原文地址：http://www.cnblogs.com/kingwell/p/3706352.html
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
//
Firefox
10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
//
W3C
提议
element.requestFullscreen();
document.exitFullscreen();
1 //进入全屏
2 function requestFullScreen() {
3 var de = document.documentElement;
4 if (de.requestFullscreen) {
5 de.requestFullscreen();
6 } else if (de.mozRequestFullScreen) {
7 de.mozRequestFullScreen();
8 } else if (de.webkitRequestFullScreen) {
9 de.webkitRequestFullScreen();
10 }
11 }
12 //退出全屏
13 function exitFullscreen() {
14 var de = document;
15 if (de.exitFullscreen) {
16 de.exitFullscreen();
17 } else if (de.mozCancelFullScreen) {
18 de.mozCancelFullScreen();
19 } else if (de.webkitCancelFullScreen) {
20 de.webkitCancelFullScreen();
21 }
22 }
document.body.addEventListener(‘click‘,function(){
requestFullScreen();
//5秒钟自动退出全屏
setTimeout(function(){
exitFullscreen();
},5000);
},false);
上一篇：Winform判断EventHandler是否已经添加
下一篇：《WF in 24 Hours》读书笔记 - Hour 1 - Understanding Windows Workflow Foundation