原文地址:http://www.javaarch.net/jiagoushi/692.htm
HTML5 Fullscreen API html5全屏编程API
页面要实现全屏预览,需要隐藏浏览器地址栏工具类等组件,那么需要考虑下用户体验。
w3c规范中的fullscreen标准可以查看:http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
当前在firefox,chrome,safari中已经支持这个API。那么我们简单看看这个代码实现:
1.请求全屏 Requesting fullscreen
为了兼容这几个浏览器需要这么写:
var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }
这里各个浏览器的API方法的大小写不一样,w3c规范中建议方法都是小写。这里是把整个docuement请求全屏,我们也可以只针对某个元素需要全屏展示,比如video。
2.取消全屏 Cancelling fullscreen
if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
w3c中使用exitFullscreen这个API,但是浏览器却都有自己的实现。
3.检查全屏状态变化 Detecting fullscreen state change
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);
4.css的全屏样式 Styling fullscreen
在css中,我们有几个伪类来给全屏设置样式,一般是 full-screen 这个伪类,然后会自动再全屏的时候生效
html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; } html:fullscreen { background: red; }
5.全屏状态下的键盘输入 Full screen with key input
为了安全原因,很多情况下全屏输入都是被阻塞禁止的,但是chrome允许通过下面的API来允许键盘输入
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
这个只在chrome支持,其他浏览器不支持。firefox计划使用requestFullscreenWithKeys 方法来支持鼠标输入,但是会触发用户通知已保证安全。
firefox10以上,chrome 15和safari5.1以上都支持了。
这是一个demo的地址:http://robnyman.github.io/fullscreen/,还有一个github示例代码:https://github.com/robnyman/robnyman.github.com/tree/master/fullscreen
相关推荐
FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态. 在线演示Demo: Fullscreen API Example (在此Demo中,可以Launch ,Hide ,以及Dump显示相关属性,可以通过chrome的...
主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下
HTML5 video播放器全屏(fullScreen)方法实例.docxHTML5 video播放器全屏(fullScreen)方法实例.docx
eclipse 全屏插件 fullscreen 获得更多编辑空间
人们一直注意到Fullscreen API标准存在较小和较大的问题,我们很乐意为您解决这些问题。 也欢迎出现印刷和语法错误的请求请求。 我们很乐意指导您完成此过程。 如果您有兴趣并且需要入门帮助,请对该问题发表评论或...
jQuery-FullScreen-master 全屏操作
Textarea Fullscreen是一个jquery插件大小只有5K,可以将textarea设置为全屏模式.免费下载地址:http://www.bcty365.com/content-99-348-1.html
该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。 复制代码代码如下:// 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { ...
ember-fullscreen使用进行所有全屏API调用。 这意味着ember-fullscreen将在所有支持全屏API / screenfull的浏览器上运行: : 检查最小。 安装 ember-fullscreen是ember-cli插件。 只需在ember-cli项目上运行...
CAD全屏CAD全屏CAD全屏CAD全屏CAD全屏CAD全屏CAD全屏CAD全屏
Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js和textareafullscreen.css <script type="text/javascript"> $(function(){ $('#demo'...
加载项通常不会覆盖Fullscreen API,因为目前这不是必需的,并且原始实现在现有的全屏显示之后会导致UI损坏。 但是,作为针对特定站点的解决方法,我们确实阻止了Vimeo上的fullscreenchange更改事件,以
一个React组件,它使用Fullscreen API将其子级设置为全屏,并使用对其进行了规范化。 用法 * 安装。 yarn add react-full-screen *导入组件和挂钩 import { FullScreen , useFullScreenHandle } from "react-full-...
轻巧且无依赖的js库使网页自动全屏显示 #用法 < script src =" /path/to/fullScreen.js " > </ script > < script > // example 1: // // '#body1' min height(px) = // [browser inner ...
切换至全屏显示的c代码,直接调用FullScreen()函数即可进入全屏显示。
fullscreen.js 是一个用来实现全屏的照片展示的 jQuery 插件,使用全屏 API,支持浏览器包括:Firefox 10 and Chrome 15 (还可能有 Safari 5.1 ). 标签:fullscreen