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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
传智播客学习之JavaScript基础篇
Nov 13 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
Bootstrap Table 删除和批量删除
Sep 22 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
基于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 构造函数construct的前下划线是双的_
2009/12/08 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
python中urllib模块用法实例详解
2014/11/19 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
python默认参数调用方法解析
2020/02/09 Python
查看keras的默认backend实现方式
2020/06/19 Python
如何验证python安装成功
2020/07/06 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
装修致歉信
2014/01/15 职场文书
数据保密承诺书
2014/06/03 职场文书
整改报告怎么写
2014/11/06 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis