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 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
详解node.js的http模块实例演示
Jul 12 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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实现的简单压缩英文字符串的代码
2008/04/24 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
javascript中数组的常用算法深入分析
2019/03/12 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
Python配置mysql的教程(推荐)
2017/10/13 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
学术诚信承诺书
2014/05/26 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸