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中遭遇级联表达式陷阱
Mar 08 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 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
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
脚本收藏iframe
2006/07/21 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
js实现下一页页码效果
2017/03/07 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
大一学生假期实习的自我评价
2013/10/12 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
在校生自我鉴定
2014/01/23 职场文书
新三好学生主要事迹
2014/01/23 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
保研导师推荐信
2015/03/25 职场文书
商场收银员岗位职责
2015/04/07 职场文书
跑出一片天观后感
2015/06/08 职场文书
小学新课改心得体会
2016/01/22 职场文书