您的位置:首页 > Web前端 > JavaScript

FullScreen JavaScript API 具体使用

2014-07-23 17:43 363 查看
  FullScreen Javascript API 目前仍是草案,实现这个 API,更确切来说是具有这项功能的浏览器有:Chrome 15 / Firefox Nightly / Safari 5.1。对于 JS API 的前端调用,我们可以先看看下面的代码:

  // Webkit (works in Safari5.1 and Chrome 15)

  element.webkitRequestFullScreen();

  document.webkitCancelFullScreen();

  // Firefox (works in nightly)

  element.mozRequestFullScreen();

  document.mozCancelFullScreen();

  // W3C 提议

  element.requestFullscreen();

  document.exitFullscreen();

  只有两个方法,在需要调用全屏的元素调用 requestFullscreen() 方法,在需要退出时对 document 调用 exitFullscreen() 这个 API。问题不大,只是命名上的不同。

  只是,厂商前缀,各浏览器的实现和 W3C 不一致,代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点,红色的是不同的点。在这一点上倒觉得 W3C 有点奇怪。好不容易 Webkit 和 Mozilla 是一致的,何必改掉命名。既然发,为什么不把 request 发成 enter 与 exit 对应?!。无论如何,至少可以实现,目前 IE 仍没有决定要不要实现这个草案,Johndyer 这样说:“I have an email from a IE team member saying they
are discussing it, but have not made any decisions. ” 。呃~

  在这里吐槽也没什么用,我们返回正题。浏览器支持 fullscreenchange 事件。让你可以为全屏做更多事。官方草案没有多提,只是略过,这一段来自 Johndyer 的代码,使用的是 Mozilla 的提案,具体使用还需要具体对待:

  // Webkit-base: element.onwebkitfullscreenchange

  // Firefox: element.onmozfullscreenchange

  // W3C Method:

  element.addEventListener('fullscreenchange', function(e) {

  if (document.fullScreen) {

  /* make it look good for fullscreen */

  } else {

  /* return to the normal state in page */

  }

  }, true);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: