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 ...
随机推荐
- OpenGL学习笔记3——缓冲区对象
在GL中特别提出了缓冲区对象这一概念,是针对提高绘图效率的一个手段.由于GL的架构是基于客户——服务器模型建立的,因此默认所有的绘图数据均是存储在本地客户端,通过GL内核渲染处理以后再将数据发往GPU ...
- Good Practices to Write Stored Procedures in SQL Server
Reference to: http://www.c-sharpcorner.com/UploadFile/skumaar_mca/good-practices-to-write-the-stored ...
- 初识Lucene.net
最近想提高下自己的能力,也是由于自己的项目中需要用到Lucene,所以开始接触这门富有挑战又充满新奇的技术.. 刚刚开始,只是写了个小小的demo,用了用lucene,确实很好 创建索引 Data ...
- Arcmap 安装完后使用出现visual fortran run-time error的解决方法
今天将ArcGIS安装到自己的XP笔记本上,安装过程一帆风顺,但打开Arcmap使用的时候,出现了visual fortran run-time error. 下面是解决方法: 下载个Dforrt.d ...
- 【原创】Android内存管理-OnTrimMemory
Application中有两个与内存管理相关的方法:onLowMemory()和 onTrimMemory(int level),源码如下 @CallSuper public void onLowMe ...
- linux下RDP客户端及服务器
tsclient redsktop remmina -->对ubuntu支持的非常不错 XRdp 集合vnc作为rdp服务器端使用;
- backup3
private void changLayoutTemp2(IActiveView activeView, IPageLayout pageLayout, IPageLayout pTempPageL ...
- OAF屏蔽的错误
ORACLE EBS中OAF屏蔽的错误 ORACLE EBS R12中引入了XML Publisher,Oracle Application Framework等新东西,利用网页/JSP技术增强For ...
- XP局域网内专用消息队列
网上能找到DELPHI消息队列的方法,在XP下试了总是不成功,后来在2003上试就行了,对比发现消息队列属性->安全 2003中多了个用户ANONYMOUS_LOGON. 然后在XP下消息队列属 ...
- jdbk应用实例
首先要在数据库中建好表,表的属性要跟代码中的一致 使用jdbk连接数据库,并且进行增删改查的操作(curd). package com.beiwi; import java.sql.Connectio ...