js 让浏览器全屏模式的方法launchFullscreen
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀
// 判断各种浏览器,找到正确的方法
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素
对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。
退出全屏模式
这个exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。
// 判断浏览器种类
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// 退出全屏模式!
exitFullscreen();
需要注意的是,exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。
全屏属性和事件
不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。
- document.fullScreenElement: 全屏显示的网页元素。
- document.fullScreenEnabled: 判断当前是否处于全屏状态。
fullscreenchange事件会在启动全屏或退出全屏时触发:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。
全屏样式CSS
各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:
:-webkit-full-screen {
/* properties */
} :-moz-full-screen {
/* properties */
} :-ms-fullscreen {
/* properties */
} :full-screen { /*pre-spec */
/* properties */
} :fullscreen { /* spec */
/* properties */
} /* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
} /* styling the backdrop*/
::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}
有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。
文章来源:http://www.weste.net/2014/4-4/96193.html
js 让浏览器全屏模式的方法launchFullscreen的更多相关文章
- [转] JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
[From] http://www.jb51.net/article/76695.htm HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏AP ...
- 关于通过JS识别浏览器类型的方法
JS检测浏览器类型的方法 网络上一般采用navigator.userAgent判断浏览器标识的办法,但是有个麻烦的问题是IE11不断升级之后,IE11的userAgent变成: "Moz ...
- JS判断浏览器类型的方法总结(IE firefox chrome opera safari)
JS判断浏览器类型的方法总结,可判别当前客户端所使用的浏览器是ie,firefox,safari,chrome或者是opera,另外js可以精确判断到ie浏览器的版本,依然直接上代码,需要的朋友可按照 ...
- Js解析浏览器路径的方法
方法如下:function parseURL(url) { var a = document.createElement('a'); //创建一个链接 a.href = url; return { s ...
- js禁止浏览器滚屏方法
在有些需求中需要对页面进行限制页面的查看权限,阻止用户滚动浏览器.那么我们就要禁止鼠标的滚动事件,并且如果浏览器的滚动事件一旦触发我们就将滚动条重置为0就可以了.以下是具体代码: //出现滚动值立马归 ...
- JS开启浏览器全屏模式,需要手动触发
<html > <meta charset="UTF-8"> <body> <button onclick="launchFul ...
- JS关于浏览器尺寸的方法
document.body.clientWidth BODY对象宽度.通配符未清零margin的时候,小于页面可见区域宽度document.body.clientHeight BODY对象高度.doc ...
- JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
实现全屏 个人版:function isFullScreen() { var fullscreenElement = document.fullscreenElement || document.we ...
- js控制浏览器全屏
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
随机推荐
- Mono登录界面记住密码的控件
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_co ...
- 串口 COM口 TTL RS-232 RS-485 区别 释疑
Point: 1.串口.COM口是指的物理接口形式(硬件).而TTL.RS-232.RS-485是指的电平标准(电信号). 2.接设备的时候,一般只接GND RX TX.不会接Vcc或者+3.3v的电 ...
- VMware/Microsoft官网查询参加的培训及认证信息
如果你参加了VMWare的培训,会要求你拿一个已经注册的邮箱加上一个密码在VMware的系统里面登记,这样你就能在VMWARE官网查到注册,并据此你才能申请VMWare的考试认证. 例如下图,路径为 ...
- 带有静态方法的类(java中的math类)
带有静态方法的类通常(虽然不一定是这样)不打算被初始化. 可以用私有构造函数来限制非抽象类被初始化. 例如,java中的math类.它让构造函数标记为私有,所以你无法创建Math的实例.但Math类却 ...
- javascrip小笔记
function getCookie(name) {//获取name为 var arr, reg = new RegExp("(^| )" + name + "=([^; ...
- django 快速实现完整登录系统
django 实现完整登录系统 本操作的环境: =================== Windows 7 64 python3.5 Django 1.10 =================== 创 ...
- Effective c++
static 声明在堆上申请静态存储 对于局部变量,将存储方式改为静态存储 对于全局变量,将连接方式局限在文件内 类中static变量:属于整个类,独立存储,没有this指针 inline inlin ...
- dedecms后台验证码显示不正常的四种处理办法
验证码不正确解决方法 分为两类解决方法 第一类:取消掉验证码,直接登录 第二类:修复验证码,回复验证码功能 四种常见的处理办法如下: 第一种:取消掉验证码具体方法如下 实现的方法一共分为两步来进行: ...
- vi、vim 查找替换
vi/vim 中可以使用 :s 命令来替换字符串.该命令有很多种不同细节使用方法,可以实现复杂的功能,记录几种在此,方便以后查询. :s/vivian/sky/ 替换当前行第一个 vivian ...
- 使用用Generic.xaml加载默认的主题资源
把Resource嵌入到Generic.xaml文件中,并把该文件放到应用程序的Themes主题文件夹下面,这们Generic.xaml文件中的资源就可以被系统识别为默认主题一部分,从而进行使用. 为 ...