浅谈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语法学习之判断一个对象是否为数组
May 13 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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数组一对一替换实现代码
2012/08/31 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
python使用scrapy解析js示例
2014/01/23 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python实现RSA加密(解密)算法
2016/02/17 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
园长自我鉴定
2013/10/06 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
八年级英语教学反思
2014/01/09 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
服务标兵事迹材料
2014/05/04 职场文书
食品药品安全责任书
2015/05/11 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server