页面可见性API--page Visbility
全屏API --full Screen
获取MediaAPI--getUserMedia
电池API --battery
资源预加载API--link Prefetching
Page Visibility 页面可见性API
该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。 在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换 *** 作时，可使用pageVisibility接口进行相应的事件监听和处理。)
page visibility的介绍
【document.hidden】 该值表示page是否是可见的,值为boolean值
【document.visibilityState】 这个visibilitystate 可有三个值得可能：
【visible】 表示该page是处于最前面的页面并且不是处于一个最小化的窗口
【hidden】 表示该page不是处于最前面的页面或者是处于一个最小化的窗口
【prerender】 表示该页面内容正在重新渲染并且该页面对于用户是不可见的
【isibilitychange Event】*监听window visibility 的改变的事件
相关代码：
// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀 // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChangeif (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"} // 添加一个标题改变的监听器 document.addEventListener(visibilityChange, function(e) { // 开始或停止状态处理 }, false)
page visibility的用处
对于visibility的改变，我们可以怎么用了做什么呢。
我们可以对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新
我们还可以根据页面的是否可见来暂停和继续音频，视频的播放
我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据，而不仅仅是打开页面而不停留在本页面。
Full Screen API全屏API
该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。十分简单有用的api.
Full Screen 的介绍
FullScreen 的API使用非常简单，其有两种模式
Launching Fullscreen Mode 启动全屏模式
// 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen()} else if(element.mozRequestFullScreen) { element.mozRequestFullScreen()} else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen()} } // 启动全屏模式 launchFullScreen(document.documentElement)// the whole page launchFullScreen(document.getElementById("videoElement"))// any individual element
Exit FullScreen Mode 退出全屏模式
// Whack fullscreenfunction exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen()} else if(document.mozCancelFullScreen) { document.mozCancelFullScreen()} else if(document.webkitExitFullscreen) { document.webkitExitFullscreen()} } // Cancel fullscreen for browsers that support it! exitFullscreen()
Full Screen 的相关属性和事件
目前fullscreen 仍存在兼容的问题，许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。
【document.fullScreenElement】 该属性表示启动全屏的元素（如 video这些）
【document.fullScreenEnabled】该属性表示当前是否全屏
【fullscreenchange 事件】 监听全屏状态改变的事件
Full Scrren 的相关
css有一些关于fullscreen的css属性
-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen, :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 */ }
FullScreen的小结
第一次见到这个API是在看一些手机小说和移动端漫画网站时，发现其有全屏的观看的功能。全屏api目前可能存在兼容性的问题，但相信不久的将来肯定会是一个使用频率超高的api
getUserMedia API
该API允许Web应用程序访问摄像头和麦克风，而无需使用插件,该API在客户端最先支持的，但在pc端仍不可用。
getUserMedia API 的介绍
先阅读下下面的html
Snap Photo
相关JS代码
// 设置事件监听器 window.addEventListener("DOMContentLoaded", function() { // 获取元素 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)}// 设置video监听器 if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = streamvideo.play()}, errBack)} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream)video.play()}, errBack)} }, false)
一旦确定当前浏览器是支持getUserMedia的时， 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video，然后通过video的play方法拉起本地video的启动和连接。这样的话我们就可以使用本地的播放器来播放。
电池API（Battery API）
这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。
Battery API 的介绍
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery// 电池属性 console.warn("Battery charging: ", battery.charging)// 当前电池是否在充电 true console.warn("Battery level: ", battery.level)// 0.58 console.warn("Battery discharging time: ", battery.dischargingTime)// 添加事件监听器 battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging)}, false)
为什么获取电池信息的API
为什么我们需要用到battery api？现在许多移动端apps都内嵌着web浏览器包装的（不再是完全native的应用）。所以我们需要一个方法去获取系统的信息，app有一些过程是`十分耗电的，然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。这是一个十分重要简单的api.相应在不久的将来会发挥应有的作用。
Link Prefetching【预加载】
预加载网页内容为浏览者提供一个平滑的浏览体验。这个api我们在业务偶尔也会使用到
什么是link预加载
Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。
!-- full page --] [link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /] [!-- just an image --] [link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /]
什么时候使用link预加载是否在自己的网站使用预加载，可以参考一下几点：
当你做的是一种类似slideshow的网页，需要提前加载近1-3张页面（假设这些页面并不大）
预先加载在网站中许多网页都会用到的图片
预先加载网站搜索的结果的页面
一、html5手机网站调用微信分享包括 ：
获取网络类型。
调起客户端的图片播放组件。
调用微信扫描二维码。
判断是否安装对应的应用。
发送邮件。
分享到微信朋友圈。
二、代码如下：
[html] view plain copy<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5网页如何调用浏览器APP的微信分享功能</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/test.css" />
<style type="text/css">
html,
body {
margin: 0
padding: 0
}
</style>
</head>
<body>
<span class="shareBtn" id="toshare">点击分享到</span>
<div id="nativeShare"></div>
<script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/nativeShare.js"></script>
<script type="text/javascript">
$("#toshare").bind("click", function() {
var config = {
url: '', //分享url
title: '', //内容标题
desc: '', //描述
img: '', //分享的图片
img_title: '', //图片名称
from: '' //来源
}
var share_obj = new nativeShare('nativeShare', config)
$(".am-share").addClass("am-modal-active")
if ($(".sharebg").length > 0) {
$(".sharebg").addClass("sharebg-active")
} else {
$("body").append('<div class="sharebg"></div>')
$(".sharebg").addClass("sharebg-active")
}
$(".sharebg-active,.share_btn").click(function() {
$(".am-share").removeClass("am-modal-active")
setTimeout(function() {
$(".sharebg-active").removeClass("sharebg-active")
$(".sharebg").remove()
}, 300)
})
})
</script>
</body>
</html>
三、输出结果：
四、其他分享接口：
A.获取“分享到朋友圈”按钮点击状态及自定义分享内容接口。
wx.onMenuShareTimeline({title: '', // 分享标题
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
B.获取“分享给朋友”按钮点击状态及自定义分享内容接口。
wx.onMenuShareAppMessage({title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
C.获取“分享到QQ”按钮点击状态及自定义分享内容接口。
wx.onMenuShareQQ({title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
D.获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口。
wx.onMenuShareWeibo({title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
E.获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
wx.onMenuShareQZone({title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可。function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError)
}else{
alert("浏览器不支持地理定位。")
}
}
上面的代码可以知道，如果用户设备支持地理定位，则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。
我们先来看函数showError()，它规定获取用户地理位置失败时的一些错误代码处理方式：
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位")
break
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用")
break
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时")
break
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效")
break
}
}
我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。
function showPosition(position){
var lat = position.coords.latitude//纬度
var lag = position.coords.longitude//经度
alert('纬度:'+lat+',经度:'+lag)
}
利用百度地图和谷歌地图接口获取用户地址
上面我们了解了HTML5的Geolocation可以获取用户的经纬度，那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口，我们只需要将HTML5获取到的经纬度信息传给地图接口，则会返回用户所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。
我们首先在页面定义要展示地理位置的div，分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互，我们将经纬度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库，需要先加载jQuery库文件。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）