各种浏览器全屏模式的方法、属性和事件介绍

标签: 浏览器 模式 方法 | 发表时间:2014-07-12 02:33 | 作者:天梯梦
出处:http://www.iteye.com

浏览器全屏模式的启动函数 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对象调用,而不是启动全屏时传入的对象。

 

全屏属性和事件

不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。

  • document.fullScreenElement: 全屏显示的网页元素。
  • 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: 100%;
  height: 100%;
}

/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}
 

 

有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。

 

这些全屏API都超级的简单,而且超级的有用。我第一次是在 MDN’s BananaBread demo中看到这个API的,那是一个枪击游戏,正好需要全屏化,它使用了事件监听来检测全屏状态。记住这些好用的API,需要的时候可以顺手拈来。

原文: http://www.webhek.com/fullscreen/

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [浏览器 模式 方法] 推荐:

各种浏览器全屏模式的方法、属性和事件介绍

- - Web前端 - ITeye博客
requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:. // 判断各种浏览器,找到正确的方法 function launchFullscreen(element) { if(element.requestFullscreen) {. element.msRequestFullscreen(); } } // 启动全屏.

浏览器兼容模式X-UA-Compatible的设置

- - 标点符
X-UA-Compatible是针对IE8新加的一个设置,对于IE8以下的浏览器是不识别的. IE9 模式支持全范围的既定行业标准,包括 HTML5(草案), W3C CSS Level 3 规范(草案), SVG 1.0 规范等. IE8 模式支持许多既定行业标准,W3C CSS Level 2.1 规范和 W3C Selectors API,有限支持 W3C CSS Level 3 规范(草案)和其他行业标准.

关于浏览器的怪异模式要注意的地方

- - jackyrong
  发现IE  9和8下(自己用的是ie 10)在浏览某些页面的时候,发现F12时文档模式那里,用的是. QUICK模式,原来这个叫怪异模式,摘录下定义,详细见:. 先看看什么是quirk模式,引用一段:http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true.

完全卸载 Chrome 浏览器的方法

- 纸条 - Chrome迷
Chrome 浏览器虽然很优秀,但萝卜青菜各有所爱,有些人用着就是不爽. 所以,我们给大家整理了这篇将 Chrome 设置为第二浏览器(非默认浏览器)和完全卸载 Chrome 浏览器的方法. 甚至还包括如何从 Google 服务器上删除 Chrome 的同步数据,希望对大家有用. 将 Chrome 设置为非默认浏览器.

IE、Chrome、Firefox浏览器收藏夹同步方法

- - IE浏览器中文网站
个人认为在浏览器的收藏夹同步方面做得最好的还是google chrome,不久前IE自从系统升级到windows 8.1以后必须使用microsoft账户才能同步. 这里收集了IE、Chrome、Firefox浏览器收藏夹同步方法,如果你有更好的方法,请一起分享讨论哦. 一、Google Bookmarks (适合 Chrome、Firefox ,提供 Web 版,支持多操作系统平台).

浏览器同源政策及其规避方法

- - 阮一峰的网络日志
浏览器安全的基石是"同源政策"( same-origin policy). 很多开发者都知道这一点,但了解得不全面. 本文详细介绍"同源政策"的各个方面,以及如何规避它. 1995年,同源政策由 Netscape 公司引入浏览器. 目前,所有浏览器都实行这个政策. 最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源".

Chrome浏览器强制http重定向到https的简单方法

- Coolxll - Chrome迷
有的朋友修改host进某些网站,但每次进入都是诸如 http://twitter.com ,大多时候有可能进不去. 前段时间就算修改了,输入http://plus.google.com ,G+也是也进不去的,需要手动修改http为https,方能进入. 今天,在Google+看到一篇介绍Chrome浏览器强制http重定向到https的简单方法,搬到这里来,纯粹的Chrome技巧.