在HTML5中,W3C制定了关于全屏的API,也就是用户可以比如一点某个键,
就可以实现全屏幕的效果,去掉工具栏等,但可惜这个目前只有google chrome 15 ,
safri(5.1开始),firfox(10开始)支持.先来看代码:
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
在WC3中,所有的fullscreen的API的方法用的都是小写,但各大浏览器中,可以
从上面的代码中看到,用的都是大写.
如果要不使用 全屏的功能,退出的话,只需要如下代码这样即可:
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
同时,可以在事件中对fullscreen进行状态的检测,比如:
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);
我们还可以在FULLSCREEN时对样式进行设置,比如:
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
在chrome中,当全屏幕模式时,还可以使用一些键的输入可能被禁止掉,但chrome
中可以重新设置请求,比如:
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
即可.
一个FULLSCREEN的例子:
http://robnyman.github.com/fullscreen/
分享到:
相关推荐
点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果
在越来越真实的web应用程序中,JavaScript也变得越来越给力. FullScreen API 是一个新的JavaScript ...全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:(带前缀
HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征。有些新特征我们已知多年并大量的...强大的全屏API接口能让程序员通过编程启动浏览器进入全屏模式,并请求用户的允许: 复制代码代码如下:// Find t
本文主要介绍了基于Vue3的全屏拖拽上传组件,分享给大家,具体如下: 知识点 浏览器拖拽 api fetch 请求 vue3 说来话长,长话短说,关于 html5 的拖拽 api 也只是做过一些拖拽排序的例子.其实思路上与其他...
利用JavaScript和Html5提供的一些API进入全屏,JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境...
人们一直注意到Fullscreen API标准存在较小和较大的问题,我们很乐意为您解决这些问题。 也欢迎出现印刷和语法错误的请求请求。 我们很乐意指导您完成此过程。 如果您有兴趣并且需要入门帮助,请对该问题发表评论或...
全屏API(Fullscreen API) 该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。 复制代码代码如下:// 找到适合浏览器的全屏方法 function launchFullScreen(element) { if...
html5 threecanvas.js全屏3D大雪花飘落动画特效 导入后直接使用,经过二次开发补充参数配置,开发基本够用了 效果:http://www.api1000.com
video.js HTML5播放器插件API调用实例,HTML5的,Flash和其他播放技术都有不同的JavaScript API与视频交互。video.js提供了一个单一的API,可用于跨平台一致,所以你只需要编写一次代码。Video.js自定义Flash后备...
手机页面强制横屏显示 竖屏会有手机旋转遮罩提示 之前整理的文件 现在清理电脑,先上传,以备下次使用...
video.js提供了一个通用控件内置的HTML / CSS的皮肤,修复跨浏览器的不一致,增加了附加功能,如全屏和字幕,管理退回到Flash或其他播放技术,不支持HTML5视频时,也提供了一个一致与视频交互的JavaScript API。...
允许任何html元素使用浏览器API进入全屏显示。 安装 安装套件 npm i @chiragrupani/fullscreen-react 用法 与类组件或功能组件一起使用,如下所示: 类组件示例 < button onClick = { e => this . setState ...
Video.Js提供了一个通用控件内置的HTML / CSS的皮肤,修复跨浏览器的不一致,增加了附加功能,如全屏和字幕,管理退回到Flash或其他播放技术,不支持HTML5视频时,也提供了一个一致与视频交互的JavaScript API。...
HTML5的,Flash和其他播放技术都有不同的JavaScript API与视频交互。video.js提供了一个单一的API,可用于跨平台一致,所以你只需要编写一次代码。 轻量级闪回退 大多数Flash视频播放器是巨大的。除了正在播放的...
Plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体... 易用 API向下兼容 - 如果浏览器不支持,则自动使用内建播放器全屏支持 -支持原生全屏和退出全屏无依赖 - 使用原生 JS 编写,不需要jQuery 标签:Plyr
<input name="radio" type="radio" class="mui-radio">Item 5 <input name="radio" type="radio">Item 6 <!-- 作者:1092979575@qq.com 时间:...