FullScreen JavaScript API 具体使用
2014-07-23 17:43
363 查看
FullScreen Javascript API 目前仍是草案,实现这个 API,更确切来说是具有这项功能的浏览器有:Chrome 15 / Firefox Nightly / Safari 5.1。对于 JS API 的前端调用,我们可以先看看下面的代码:
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();
只有两个方法,在需要调用全屏的元素调用 requestFullscreen() 方法,在需要退出时对 document 调用 exitFullscreen() 这个 API。问题不大,只是命名上的不同。
只是,厂商前缀,各浏览器的实现和 W3C 不一致,代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点,红色的是不同的点。在这一点上倒觉得 W3C 有点奇怪。好不容易 Webkit 和 Mozilla 是一致的,何必改掉命名。既然发,为什么不把 request 发成 enter 与 exit 对应?!。无论如何,至少可以实现,目前 IE 仍没有决定要不要实现这个草案,Johndyer 这样说:“I have an email from a IE team member saying they
are discussing it, but have not made any decisions. ” 。呃~
在这里吐槽也没什么用,我们返回正题。浏览器支持 fullscreenchange 事件。让你可以为全屏做更多事。官方草案没有多提,只是略过,这一段来自 Johndyer 的代码,使用的是 Mozilla 的提案,具体使用还需要具体对待:
// Webkit-base: element.onwebkitfullscreenchange
// Firefox: element.onmozfullscreenchange
// W3C Method:
element.addEventListener('fullscreenchange', function(e) {
if (document.fullScreen) {
/* make it look good for fullscreen */
} else {
/* return to the normal state in page */
}
}, true);
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();
只有两个方法,在需要调用全屏的元素调用 requestFullscreen() 方法,在需要退出时对 document 调用 exitFullscreen() 这个 API。问题不大,只是命名上的不同。
只是,厂商前缀,各浏览器的实现和 W3C 不一致,代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点,红色的是不同的点。在这一点上倒觉得 W3C 有点奇怪。好不容易 Webkit 和 Mozilla 是一致的,何必改掉命名。既然发,为什么不把 request 发成 enter 与 exit 对应?!。无论如何,至少可以实现,目前 IE 仍没有决定要不要实现这个草案,Johndyer 这样说:“I have an email from a IE team member saying they
are discussing it, but have not made any decisions. ” 。呃~
在这里吐槽也没什么用,我们返回正题。浏览器支持 fullscreenchange 事件。让你可以为全屏做更多事。官方草案没有多提,只是略过,这一段来自 Johndyer 的代码,使用的是 Mozilla 的提案,具体使用还需要具体对待:
// Webkit-base: element.onwebkitfullscreenchange
// Firefox: element.onmozfullscreenchange
// W3C Method:
element.addEventListener('fullscreenchange', function(e) {
if (document.fullScreen) {
/* make it look good for fullscreen */
} else {
/* return to the normal state in page */
}
}, true);
相关文章推荐
- How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口)
- Fullscreen API的简单使用方法
- Native Fullscreen JavaScript API (plus jQuery plugin)
- How to Use HTML5 FUll Screen API(怎样使用HTML5全屏接口)
- 使用the ArcGIS API for JavaScript创建程序
- Google Map API使用详解(十)——使用JavaScript创建地图详解(上)
- ArcGIS Server 9.3 JavaScript API实战(二)----一个具体的小系统示例介绍
- 使用ArcGIS javascript API编写车辆定位系统(一)
- JavaScript Dom API简单使用
- Node.js高级编程:用JavaScript构建可伸缩应用(6)2.6 核心API基础-使用计时器制定函数的执行计划
- 如何开始使用Google Map API(JavaScript)?
- JavaScript 简单DOM API的简单使用
- Fullscreen API 全屏显示网页
- ArcGIS For JavaScript API Show map using layer definitions(使用层定义显示地图)————(十三)
- Node.js高级编程:用Javascript构建可伸缩应用(4)2.4 核心API基础-使用Buffer处理,编码,解码二进制数据
- android google map api的具体使用
- 使用Windows Live Spaces MetaWeblog API具体操作实现
- javascript fullscreen全屏实现代码
- 分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)
- 使用Google Maps Javascript API实现反向地址解析