HTML5 API详解(1):fullscreen全屏模式
fullscreen API 接口
属性1:fullscreenElement 该属性返回当前处于全屏模式的DOM元素。
属性2:fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。
方法1:requestFullscreen() 请求进入全屏模式。
方法2:exitFullscreen() 退出全屏模式。
事件1:fullscreenchange 进入/退出全屏模式切换时会触发。
事件2:fullscreenerror 进入/退出全屏模式失败时会触发。
由于fullscreen API 存在浏览器兼容性问题,所以我们在使用的时候需要进行跨浏览器处理,参考代码:
跨浏览器返回正处于全屏的元素
function fullscreenElement(){
var fullscreenEle = document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
//注意:要在用户授权全屏后才能获取全屏的元素,否则 fullscreenEle为null
console.log("全屏元素:"+fullscreenEle);
return fullscreenEle;
}
跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
function fullscreenEnable(){
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled;
//注意:要在用户授权全屏后才能准确获取当前的状态
if(isFullscreen){
console.log('全屏模式');
}else{
console.log('非全屏模式');
}
}
跨浏览器发动全屏
function lanchFullscreen(element){
if(element.requestFullscreen){
element.requestFullscreen();
}
else if(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}
else if(element.msRequestFullscreen){
element.msRequestFullscreen();
}
else if(element.webkitRequestFullscreen){
element.webkitRequestFullScreen();
}
}
跨浏览器退出全屏
function exitFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.msExitFullscreen){
document.msExiFullscreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
}
各浏览器fullscreenchange 事件处理
document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});
各浏览器fullscreenerror 事件处理
document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });
跨浏览器全屏模式下样式代码
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
HTML5 API详解(1):fullscreen全屏模式相关推荐
- HTML5 API详解(18):IndexedDB 本地存储
Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB.Web Storage使用简单 ...
- HTML5 API详解(17):Web SQL DataBase本地数据库
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性 ...
- HTML5 API详解(16):web socket 全双工通信
目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet.Comet技术可以让服务器主动以异步方式向客户端推送数据. 使用轮询时,浏览器定期发送HTTP请求 ...
- HTML5 API详解(15):History 不刷新也可以实现网页跳转
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- HTML5 API详解(14):Notification 实现桌面提醒
桌面提醒功能可以在窗口隐藏甚至是浏览器最小化(不被激活)的情况下,依然可以对用户进行信息通信,采用的方式就是在电脑桌面的右下角弹出消息提示框.这样的一个功能可以使用在一些消息推送的场景下.不过,虽然h ...
- HTML5 API详解(5):Page Visibility API帮您省流量,提高体验
页面可见性API可以让你知 道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了 ...
- HTML5 API详解(3):为何网页上要增加Battery电池状态API
手机自身的电源管理已经相当不错了,那为何网页上还要增加一个HTML5 Battery电池状态API呢? 随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性.移动端的页面显然会越 ...
- HTML5 API详解(12):canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
- HTML5 API详解(11):Cache 应用程序缓存,这下离线也可以玩了
Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本.缓存会根据进来的请求保存输出内容的副本:当下一个请求来到的时候,如果是相同的URL,缓 ...
最新文章
- SOA与云计算相结合推动企业发展
- 如何用python进行量化交易_从零开始学习Python和量化交易
- Python学习:基本概念
- linux avd 界面,Android Studio创建AVD
- 从0到1使用VUE-CLI3开发实战(五):模块化VUEX及使用vuetify
- STC8PROG - Linux下的 STC8G STC8H 烧录工具
- Informatic学习总结_day03_update组件学习
- psp软件设计需求分析
- webpack随笔04-webpack5压缩jscss
- 荣誉勋章出现计算机中丢失,荣誉勋章战士无法运行的原因及解决方法
- java HotSpot 内存管理白皮书
- 车载通信——CAN收发器选型(低功耗)
- 手把手教你在GitHub上传项目(超详细)
- 51 地图基本接口(三)
- linux ip打印机驱动程序,Ubuntu下佳能ip1000打印机驱动的安装
- 这个仰望星空的地方,藏着马化腾的梦想
- 忘记英语四六级准考证号怎么办——简单方法实测有效
- 这两个工具能批量PDF转图片,建议收藏使用
- 计算机七年级学情分析,2017七年级的信息技术教学计划
- iOS 获取手机倾斜角度