zoukankan      html  css  js  c++  java
  • 另5个你不知道的HTML5接口API

    原文地址: 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>

  • 相关阅读:
    Delphi公用函数单元
    Delphi XE5 for Android (十一)
    Delphi XE5 for Android (十)
    Delphi XE5 for Android (九)
    Delphi XE5 for Android (八)
    Delphi XE5 for Android (七)
    Delphi XE5 for Android (五)
    Delphi XE5 for Android (四)
    Delphi XE5 for Android (三)
    Delphi XE5 for Android (二)
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6467108.html
Copyright © 2011-2022 走看看