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 相关文章推荐
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
Vue SSR 组件加载问题
May 02 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 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
网络资源
2006/10/09 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
回顾Javascript React基础
2019/06/15 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python 数据结构之队列的实现
2017/01/22 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
用 Python 制作地球仪的方法
2020/04/24 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
python 利用zmail库发送邮件
2020/09/11 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
篮球比赛口号
2014/06/10 职场文书
给医院的感谢信
2015/01/21 职场文书
西双版纳导游词
2015/02/03 职场文书
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers