另5个你不知道的HTML5接口API

北溟有渔夫

 关注

阅读 78

2022-02-16


原文地址： ​​ 5 More HTML5 APIs You Didn’t Know Existed​​

演示地址：

​​全屏API Demo​​


原文日期： 2012年11月08日


翻译日期： 2013年08月13日

HTML5 已经给我们提供了许多好用的JavaScript以及HTML API.其中一些是我们期待了许多年的，而另外一些是为移动和桌面开发者准备的。不管这些API出于什么目的而推出，只要能帮我们更好地完成工作就是“好猫”。

前几天我发表了一篇名为： 5个你不知道的HTML5的接口的博文，希望能帮您更好地开发web应用。今天我将为您介绍另外5个少为人知的HTML5 API—— 希望您能发现他们的用途!

全屏API

强大的全屏API允许开发者让浏览器进入全屏模式，当然前提是得到用户的许可。

// 处理全屏(需要全屏显示DOM元素)
  function launchFullScreen(element) {
    // 先检测最标准的方法
    if(element.requestFullScreen) {
    element.requestFullScreen();
    } else if(element.mozRequestFullScreen) {
    // 其次，检测Mozilla的方法
    element.mozRequestFullScreen();
    } else if(element.webkitRequestFullScreen) {
    // if 检测 webkit的API
    element.webkitRequestFullScreen();
    }
  };
// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element

任意的DOM元素都可以切换至全屏状态，甚至CSS伪类还可以控制全屏模式下的不同样式。这个API特别适合JavaScript游戏的开发，尤其是像

​​BananaBread​​这样的第一人称射击游戏!

页面可见性API

当用户切换浏览器标签的时候,页面可见性API(Page Visibility API, http://davidwalsh.name/page-visibility )将触发一个事件，而开发者可以监听这个事件并做一些处理.


// Adapted slightly from Sam Dutton
// Set name of hidden property and visibility change event
// since some browsers only offer vendor-prefixed support
var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
  state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
  state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
  state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
  state = "webkitVisibilityState";
}

// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function(e) {
  // Start or stop processing depending on state

}, false);


如果使用恰当，在当前标签页不可见的时候，可以暂停一些消耗资源的任务(比如Ajax定时刷新,或者动画效果).

获取多媒体资源API

getUserMedia API 非常的有趣,这个API允许访问媒体设备，比如笔记本的摄像头。通过这个API以及<video>,<canvas>标签,就可以

通过浏览器来拍摄 你漂亮的照片.


// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
  // Grab elements, create settings, etc.
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
      console.log("Video capture error: ", error.code); 
    };

  // Put video listeners into place
  if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function(stream) {
      video.src = stream;
      video.play();
    }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoObj, function(stream){
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  }
}, false);


期待在几年内有更多的应用通过浏览器和用户进行交互。

电池电量 API

​​电池电量 API​​ 显然是用来查看移动设备电池电量等状态信息的:


// Get the battery!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

// A few useful battery properties
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);

// Add a few event listeners
battery.addEventListener("chargingchange", function(e) {
  console.warn("Battery charge change: ", battery.charging);
}, false);

获取电池信息，那么web应用程序就可以根据电量来决定是否执行一些耗电的操作.这不是一个开创性的API,但肯定有很多用处。

链接预加载API

Link prefetching 允许网站在后台默默地预加载一些资源以便用户体验更顺畅。

<!-- full page -->
<link rel="prefetch" href="http://blog.csdn.net/renfufei" />
<!-- just an image -->
<link rel="prefetch" href="http://avatar.csdn.net/4/9/C/1_renfufei.jpg" />

上面所介绍的5个API在未来几年肯定会得到广泛的应用，所以你越快熟悉他们，那你的Web应用程序就会抢占先机。花一些时间来深入研究这些API并尝试着集成到你的app中吧！

其中，全屏API的示例代码：

说明： 在webkit中，直接是document相关的属性，那么 “Fullscreen”之中的screen全是小写的，而document.documentElement 则大小写均可，这是怪异的一个地方.另外，如果是一个方法，那么"FullScreen"中的S是大写的，这是一个诡异的不一致的地方，很可能是苹果时期的webkit遗留下来的bug。示例代码如下，在chrome之中调试通过,如果在IE或者Firefox之中调试出一些什么问题，很可能就是这个大小写的麻烦.

<!DOCTYPE html>
<html>
 <head>
  <title> FullScreen API 演示</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="renfufei@qq.com">
  <meta name="Description" content="http://davidwalsh.name/more-html5-apis">
  <script>
  // 处理全屏(需要全屏显示DOM元素)
  function launchFullScreen(element) {
    // 先检测最标准的方法
    if(element.requestFullScreen) {
    element.requestFullScreen();
    } else if(element.mozRequestFullScreen) {
    // 其次，检测Mozilla的方法
    element.mozRequestFullScreen();
    } else if(element.webkitRequestFullScreen) {
    // if 检测 webkit的API
    element.webkitRequestFullScreen();
    }
  };
  // 退出全屏,不用管具体是哪个元素，因为屏幕是唯一的。
  function cancelFullscreen() {
    if(document.cancelFullScreen) {
    document.cancelFullScreen();
    } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
    } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
    }
  };
  // 显示全屏信息
  function dumpFullscreen() {
    var d = document;
    var fullE = null;
    var fullEnable = "fullScreen is disable!";
    if(d.fullScreenElement){
      fullE = d.fullScreenElement;
    } else if(d.mozFullScreenElement){
      // 如果有问题，把mozFullscreenElement 改为 mozFullScreenElement,S大写
      fullE = d.mozFullScreenElement;
    } else if(d.webkitFullscreenElement){
      // 本人的为chrome， Fullscreen 之中，s为小写。
      fullE = d.webkitFullscreenElement;
    }
    // 如果有问题，请切换 fullScreen 中 s 的大小写。
    if(d.fullScreenEnabled){
      fullEnable = d.fullScreenEnabled;
    } else if(d.mozFullScreenEnabled){
      fullEnable = d.mozFullScreenEnabled;
    } else if(d.webkitFullscreenEnabled){
      // 注意 Fullscreen 的中间s大小写
      fullEnable = d.webkitFullscreenEnabled;
    }
    //
    if(window.console){
      console.dir(fullE);
    } else if(fullE){
      alert(fullE.tagName);
    } else {
      alert("全屏元素是:"+fullE);
    }
    //
    if(window.console){
      console.info("允许全屏:"+fullEnable);
    } else if(fullEnable){
      alert("允许全屏:"+fullEnable);
    } else {
      alert("允许全屏:"+fullEnable);
    }
  };
  // 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。
  window.addEventListener("DOMContentLoaded", function() {
    // 获取DOM元素
    var enterfull = document.getElementById("enterfull");
    var quitfull = document.getElementById("quitfull");
    var dumpfull = document.getElementById("dumpfull");

    // 事件监听
    enterfull.addEventListener("click", function() {
      // 
      launchFullScreen(document.documentElement);
    });
    quitfull.addEventListener("click", function() {
      // 
      cancelFullscreen();
    });
    dumpfull.addEventListener("click", function() {
      // 
      dumpFullscreen();
    });

  }, false);
  // 全屏事件Events
  document.addEventListener("fullscreenchange", function(e) {
    console.dir(e);
  });
  document.addEventListener("mozfullscreenchange", function(e) {
    console.dir(e);
  });
  document.addEventListener("webkitfullscreenchange", function(e) {
    console.dir(e);
  });
  </script>
 </head>

 <body>

  <div>
    <button id="enterfull">进入全屏</button><br/>
    <button id="quitfull">退出全屏</button><br/>
    <button id="dumpfull"> 查看全屏的DOM元素</button><br/>
  </div>
 </body>
</html>



相关推荐

你可能不知道的html5冷知识

菜菜捞捞 49 0 0

5 个你还不知道的 Docker 命令

sunflower821 100 0 0

5个你可能不知道的很棒CSS功能

小磊z 91 0 0

5 个强大的 HTML5 API

mafa1993 109 0 0

HTML5 classList API接口

少_游 71 0 0

[word] 你不知道的5个Word隐藏功能，个个超实用

安七月读书 17 0 0

你不知道的Axios封装api方式

代码小姐 89 0 0

html-你不知道的＜meter＞标签

读思意行 52 0 0

你不知道的 HTML 表单新特性

他说Python 81 0 0

你不知道的:递归

未定义变量 141 0 0

精彩评论（0）

0 0 举报