JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件


Posted in Javascript onDecember 20, 2015

HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用。先看常见的API

 element.requestFullScreen()

 作用:请求某个元素element全屏

Document.getElementById(“myCanvas”).requestFullScreen()

  这里是将其中的元素ID去请求fullscreen

退出全屏

  document.cancelFullScreen()

Document.fullScreen

  如果用户在全屏模式下,则返回true

 document.fullScreenElement

  返回当前处于全屏模式下的元素

   下面的代码是开启全屏模式:

function fullScreen(element) { 
  if(element.requestFullScreen) { 
  element.requestFullScreen(); 
 } else if(element.webkitRequestFullScreen ) { 
   element.webkitRequestFullScreen(); 
  } else if(element.mozRequestFullScreen) { 
  element.mozRequestFullScreen(); 
 } 
 }

    下面的代码就是整个页面调用全屏模式

      不过老实说,FULL SCREEN有个问题,容易造成欺骗,比如在
http://feross.org/html5-fullscreen-api-attack/中,其中就有一个很好的DEMO,去欺骗了,比如某个链结写的是http://www.bankofamerica.com,大家以为是美国银行,一点进去,因为使用了全屏幕API,就会欺骗到人 

$('html').on('click keypress', 'a', function(event) { 
  // 不响应真正的A HREF点击事件 
 event.preventDefault(); 
  event.stopPropagation(); 
  // Trigger fullscreen 
  if (elementPrototype.requestFullscreen) { 
   document.documentElement.requestFullscreen(); 
  } else if (elementPrototype.webkitRequestFullScreen) { 
   document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
  } else if (elementPrototype.mozRequestFullScreen) { 
   document.documentElement.mozRequestFullScreen(); 
  } else { 
   // 
  } 
  //显示假的UI 
  $('#menu, #browser').show(); 
  $('#target-site').show(); 
 });

下面给大家介绍JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍

浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:

代码如下:

// 判断各种浏览器,找到正确的方法
function launchFullscreen(element) {
 if(element.requestFullscreen) {
  element.requestFullscreen();
 } else if(element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
 } else if(element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
 } else if(element.msRequestFullscreen) {
  element.msRequestFullscreen();
 }
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。

退出全屏模式

这个exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。

 代码如下:

// 判断浏览器种类
function exitFullscreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 } else if(document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 } else if(document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 }
}
// 退出全屏模式!
exitFullscreen();

需要注意的是,exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。

全屏属性和事件

不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。

1.document.fullScreenElement: 全屏显示的网页元素。
2.document.fullScreenEnabled: 判断当前是否处于全屏状态。

fullscreenchange事件会在启动全屏或退出全屏时触发:

 代码如下:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:

 代码如下::

-webkit-full-screen {

 /* properties */
}
:-moz-full-screen {
 /* properties */
}
:-ms-fullscreen {
 /* properties */
}
:full-screen { /*pre-spec */
 /* properties */
}
:fullscreen { /* spec */
 /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
 width: %;
 height: %;
}
/* styling the backdrop*/
::backdrop {
 /* properties */
}
::-ms-backdrop {
 /* properties */
}

有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。

这些全屏API都超级的简单,而且超级的有用。我第一次是在MDN's BananaBread demo中看到这个API的,那是一个枪击游戏,正好需要全屏化,它使用了事件监听来检测全屏状态。记住这些好用的API,需要的时候可以顺手拈来。

 

Javascript 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
微信小程序异步处理详解
Nov 10 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
vue 实现上传组件
May 31 Vue.js
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 #Javascript
jQuery mobile 移动web(4)
Dec 20 #Javascript
基于jQuery实现放大镜特效
Oct 19 #Javascript
jQuery mobile 移动web(6)
Dec 20 #Javascript
jquery mobile 移动web(5)
Dec 20 #Javascript
js倒计时抢购实例
Dec 20 #Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 #Javascript
You might like
一些常用的php函数
2006/12/06 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
基于scrapy的redis安装和配置方法
2018/06/13 Python
实时获取Python的print输出流方法
2019/01/07 Python
详解Python:面向对象编程
2019/04/10 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
python selenium xpath定位操作
2020/09/01 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
校园活动策划书范文
2014/01/10 职场文书
客服部班长工作责任制
2014/02/25 职场文书
优秀会计求职信
2014/07/04 职场文书
社区工作者个人总结
2015/02/28 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS