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 相关文章推荐
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
JavaScript表单验证开发
Nov 23 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
js之ajax文件上传
May 13 Javascript
基于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通过COM类调用组件的实现代码
2012/01/11 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
three.js 入门案例详解
2018/01/23 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
python 数据加密代码
2008/12/24 Python
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
物业总经理岗位职责
2014/02/28 职场文书
入股协议书范本
2014/04/14 职场文书
民主评议党员工作总结
2014/10/20 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers