HTML5实现全屏API【进入和退出全屏】
2014-05-04 11:16
357 查看
现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样:
【进入和退出全屏】
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();
【兼容解决方案】
注:可能出于安全考虑,只能手动触发才能实现全屏,浏览器自动执行无效果。
【实例】
【进入和退出全屏】
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();
【兼容解决方案】
//进入全屏 function requestFullScreen() { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } } //退出全屏 function exitFullscreen() { var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); } }
注:可能出于安全考虑,只能手动触发才能实现全屏,浏览器自动执行无效果。
【实例】
document.body.addEventListener('click',function(){ requestFullScreen(); //5秒钟自动退出全屏 setTimeout(function(){ exitFullscreen(); },5000); },false);
相关文章推荐
- HTML5的页面资源预加载技术(Link prefetch)加速页面加载
- 再发一个HTML5+WebSocket+PHP多进程 多人在线小蝌蚪游戏[强烈推荐]
- HTML5中判断用户是否正在浏览页面的方法
- 在HTML5 Canvas中放入图片和保存为图片的方法
- 水平/垂直居中详解
- 霸气侧漏的HTML5--之--canvas(1) api + 弹球实例
- 使用HTML5技术控制电脑或手机上的摄像头
- html5与以往版本的不同(一)
- 字符串的加密与解密
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)
- [HTML5 Canvas学习]使用颜色和透明度
- [HTML5 Canvas学习]绘制矩形
- 最佳HTML5应用开发工具推荐
- 【2Dhtml5游戏框架phaser介绍2】使用在线云IDE开发phaser
- 山寨HTML5API classList类
- html5 touch事件实现触屏页面上下滑动(一)
- HTML5 Security Cheatsheet
- 12 款实用的 HTML5 干货分享