浅谈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身份证验证超强脚本
Oct 26 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
javascript实现滚轮轮播图片
Dec 13 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类声明和php类使用方法示例分享
2014/03/29 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
python实现斐波那契递归函数的方法
2014/09/08 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python实现Flappy Bird源码
2018/12/24 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
Python 如何查找特定类型文件
2020/08/17 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
工作疏忽检讨书
2014/01/25 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014年科协工作总结
2014/12/09 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python