浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题


Posted in Javascript onOctober 10, 2016

如果你想使一个元素在全屏模式下展现 (比如说 <video>),你可以调用该元素的 requestFullscreen() 方法;这个方法在 Gecko 中的实现是 element.mozRequestFullScreen(),在 WebKit 中为 element.webkitRequestFullscreen()。

比如一个实例:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
 elem.requestFullscreen();		//IE浏览器
} else if (elem.mozRequestFullScreen) {
 elem.mozRequestFullScreen();			//火狐浏览器
} else if (elem.webkitRequestFullscreen) {
 elem.webkitRequestFullscreen();			//谷歌浏览器
}

运行到这里,Gecko 与 WebKit 两个实现中出现了一个值得注意的区别:Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕: "width: 100%; height: 100%"。 WebKit 则不会这么做;它会让全屏的元素以原始尺寸居中到屏幕中央,其余部分变为黑色。为了在 WebKit 下也达到与 Gecko 同样的全屏效果,你需要手动为元素增加 CSS 规则"width: 100%; height: 100%;":

function toggleFullScreen() {
 if (!document.fullscreenElement &&  // alternative standard method
   !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
  if (document.documentElement.requestFullscreen) {
   document.documentElement.requestFullscreen();
  } else if (document.documentElement.mozRequestFullScreen) {
   document.documentElement.mozRequestFullScreen();
  } else if (document.documentElement.webkitRequestFullscreen) {
   document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  }
 } else {
  if (document.cancelFullScreen) {
   document.cancelFullScreen();
  } else if (document.mozCancelFullScreen) {
   document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
   document.webkitCancelFullScreen();
  }
 }
}

代码首先检查了 document 上的 fullscreenElement 属性(也检查了带 -moz- 与 -webkit- 两个前缀的)。如果该属性为 null,则 document 当前处于窗口模式,所以我们需要切换进全屏模式。可以通过调用 element.mozRequestFullScreen() 或者 webkitRequestFullscreen()来进入全屏模式,具体调用哪个还要看哪个方法可用。

如果已经激活了全屏模式 (fullscreenElement 非空),我们调用 document.mozCancelFullScreen() 或 webkitCancelFullScreen(),同样要依赖于我们使用了哪个浏览器。

以上就是小编为大家带来的浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
js实现图片轮播效果
Dec 19 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
微信小程序实现签字功能
Dec 23 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
js实现验证码功能
Jul 24 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 #Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 #Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 #Javascript
js中获取键盘事件的简单实现方法
Oct 10 #Javascript
轻松实现jquery选项卡切换效果
Oct 10 #Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 #Javascript
Javascript生成带参数的二维码示例
Oct 10 #Javascript
You might like
php max_execution_time执行时间问题
2011/07/17 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
实例讲解php实现多线程
2019/01/27 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
python实现屏保计时器的示例代码
2018/08/08 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
艺人经纪人岗位职责
2014/04/15 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
教师个人师德总结
2015/02/06 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
新手入门Mysql--概念
2021/06/18 MySQL