浅谈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 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
基于Express框架使用POST传递Form数据
Aug 10 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python生成数字图片代码分享
2017/10/31 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python切片操作实例分析
2018/03/16 Python
python实现猜单词小游戏
2020/05/22 Python
python DataFrame 取差集实例
2019/01/30 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
python 实现二维列表转置
2019/12/02 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
校园新闻广播稿
2014/01/10 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
横幅标语大全
2014/06/17 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
个人租房协议书
2014/11/28 职场文书
食品药品安全责任书
2015/05/11 职场文书
小学庆六一主持词
2015/06/30 职场文书
交流会主持词
2015/07/02 职场文书
中学生运动会广播稿
2015/08/19 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP