时时彩遗漏分析软件:[html5]HTML5全屏与退出全屏的API

时间:2017-12-29 14:58csdn.net
[html5]HTML5全屏与退出全屏的API

内蒙古时时彩遗漏数据 www.qdqsy.cn 翻译人员: 铁锚
原文日期: 2013年12月23日
翻译日期: 2013年12月29日
原文链接: Fullscreen API

在越来越真实的web应用程序中,JavaScript也变得越来越给力.
FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.
在线演示Demo:  Fullscreen API Example
(在此Demo中,可以Launch ,Hide ,以及Dump显示相关属性,可以通过chrome的控制台查看日志信息.)

启动全屏模式
全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:
(带前缀,意思就是各个浏览器内核不通用.)

  1. // 找到支持的方法, 使用需要全屏的 element 调用   
  2. function launchFullScreen(element) {   
  3.   if(element.requestFullscreen) {   
  4.     element.requestFullscreen();   
  5.   } else if(element.mozRequestFullScreen) {   
  6.     element.mozRequestFullScreen();   
  7.   } else if(element.webkitRequestFullscreen) {   
  8.     element.webkitRequestFullscreen();   
  9.   } else if(element.msRequestFullscreen) {   
  10.     element.msRequestFullscreen();   
  11.   }   
  12. }   
  13.    
  14.    
  15. // 在支持全屏的浏览器中启动全屏   
  16. // 整个页面   
  17. launchFullScreen(document.documentElement);   
  18. // 某个元素   
  19. launchFullScreen(document.getElementById("videoElement"));   

将需要全屏显示的DOM元素作为参数,调用此方法即可让window进入全屏状态,有时候可能需要用户同意(浏览器自己和用户交互),假若用户拒绝,则可能出现各种不完全的全屏.
如果用户同意进入全屏,那么工具栏以及其他浏览器组件会隐藏起来,使document框架的宽度和高度横跨整个屏幕.

退出全屏模式
使用 exitFullscreen 方法可以使浏览器退出全屏,返回原先的布局. 该方法在一些老的浏览器上也是支持前缀方法.

  1. // 退出 fullscreen   
  2. function exitFullscreen() {   
  3.   if(document.exitFullscreen) {   
  4.     document.exitFullscreen();   
  5.   } else if(document.mozExitFullScreen) {   
  6.     document.mozExitFullScreen();   
  7.   } else if(document.webkitExitFullscreen) {   
  8.     document.webkitExitFullscreen();   
  9.   }   
  10. }   
  11.    
  12.    
  13. // 调用退出全屏方法!   
  14. exitFullscreen();   

热门文章推荐

请稍候...
  • 建国后,除了国家机构外,还有众多行业领域都冠以“人民”二字,人民铁道,人民邮电,人民电力,人民公安,人民币。。。 2019-04-16
  • 南昌市生殖医院心理门诊正式开诊 2019-03-25
  • 把课堂上的重点难点录下来 教学类短视频平台前景几何 2019-03-24
  • 蔡英文赴美演讲就是要与大陆军事摊牌? 2019-03-24
  • 三江源通天河流域发现两千年前岩画 2019-03-23
  • 【三年决战奔小康】一封来自甘南精准扶贫户的感谢信 2019-03-23
  • 作为政治哲学的人类解放理想 2019-03-17
  • 深入学习宣传贯彻党的十九大精神br扎实推进新时代机关党的建设 2019-03-12
  • 多地推出创新举措 促进住房租赁市场健康发展 2019-03-12
  • 马拉松+公益:梦想1公里 和你一起跑 2019-02-22
  • 回复@了不起重上井冈山2:然后你连讨饭都省了? 2019-02-22
  • 科教 —频道 春城壹网 七彩云南 一网天下 2019-02-08
  • 全域旅游看中国--旅游频道 2018-08-21
  • 【专家谈】上合组织——构建区域命运共同体的有力实践者 2018-08-19
  • “奇石大餐”亮相新疆石博会 2018-08-19
  • 799| 325| 478| 719| 898| 727| 423| 172| 716| 426|