浅谈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判断是否为数组的3种方法及效率比较
Apr 01 Javascript
js比较日期大小的方法
May 12 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
js实现图片轮播效果
Dec 19 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 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 echo 输出字符串函数详解
2010/05/13 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
JavaScript入门学习书籍推荐
2008/06/12 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jquery处理json对象
2014/11/03 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
培训楼经理岗位责任制
2014/02/10 职场文书
岗位工作说明书
2014/07/29 职场文书
Oracle使用别名的好处
2022/04/19 Oracle