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 ...
随机推荐
- qt环境下Mapx组建的编程---------regoin
#include "widget.h" #include "ui_widget.h" #include <QPushButton> #include ...
- ReferenceError: $ is not defined (绝对路径和相对路径)
今天使用JQuery时,进入js文件后一直达不到想要的效果,在firebug上调试后发现报错提示"ReferenceError: $ is not defined",显然,这是JQ ...
- 2016-09-19: linux后台运行
linux后台运行命令两种方式: 1. command & : 后台运行,你关掉终端会停止运行 2. nohup command & : 后台运行,你关掉终端也会继续运行 简介 L ...
- 【ORM】--FluentNHibernate之基本映射详解
最近在做项目的时候用到了NHibernate,使用它并不困难,但是很麻烦.如果我的数据库有几百张表如果想要一个个的映射岂不是很麻烦,所以这种情况下使用NHibernate就会很笨重,虽然 ...
- C#小写数字金额转换成大写人民币金额的算法
C#小写数字金额转换成大写人民币金额的算法 第一种方法: using System.Text.RegularExpressions;//首先引入命名空间 private string DaXie(st ...
- sea.js 入门
上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...
- Tomcat安装后,远程IP无法访问的问题。
我在使用阿里云与聚石塔的时候,发现Tomcat启动后,本地可以访问,但是外网无法访问,即使关闭防火墙也无法访问. 原因是 云平台的网络拦截. 阿里云:有一个入网规则 和 出网规则 ,流入数据端口 流 ...
- OpenSSL主配置文件openssl.cnf
虽说配置文件很多设置不用修改就能直接使用,但是了解它是配置openssl相关事项所必须的.而且要实现复杂多功能,必然要对配置相关了然于心. 1.man config 该帮助文档说明了openssl.c ...
- Xamarin Android自学和实践步骤
一.入门(已完成) 1.学习Xamarin Android项目的基本结构 2.学习界面布局的基本方式 3.学习基本编码规则 4.学习页面跳转和传值 5.学习对话框和提示信息显示方法 6.学习使用系统剪 ...
- Java画图程序设计
本文讲述一个画图板应用程序的设计,屏幕抓图如下: 『IShape』 这是所有图形类(此后称作模型类)都应该实现接口,外部的控制类,比如画图板类就通过这个接口跟模型类“交流”.名字开头的I表示它是一个接 ...