HTML5常用API
- 页面可见性API——Page Visibility
- API全屏API——Full Screen
- 访问摄像头和麦克风——getUserMedia API
- 电池API——Battery API
- 预加载——Link Prefetching
- 监听屏幕旋转变化接口: ——orientationchange
- 手机震动: ——window.navigator.vibrate(200)
- 当前语言: ——navigator.language
- 联网状态: ——navigator.onLine
页面可编辑: ——contentEditable
浏览器活跃窗口监听: ——window.onblur & window.onfocus
页面可见性API——Page Visibility
该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, 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";
}
// 添加一个标题改变的监听器
document.addEventListener(visibilityChange, function(e) {
// 开始或停止状态处理
}, false);
常见使用：
我们可以对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新
我们还可以根据页面的是否可见来暂停和继续音频，视频的播放
我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据，而不仅仅是打开页面而不停留在本页面。
API全屏API——Full Screen
该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。十分简单有用的api.
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 事件：监听全屏状态改变的事件
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 */
}
使用案例：移动端小说和漫画全屏观看
访问摄像头和麦克风——getUserMedia API
该API允许Web应用程序访问摄像头和麦克风，而无需使用插件,该API在客户端最先支持的，但在pc端仍不可用。
// 设置事件监听器
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 = 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);
一旦确定当前浏览器是支持getUserMedia的时， 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video，然后通过video的play方法拉起本地video的启动和连接。这样的话我们就可以使用本地的播放器来播放。
电池API——Battery API
这是一个针对移动设备应用程序的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);
| key | 描述 | 备注 |
|---|---|---|
| charging | 是否在充电 | 可读属性 |
| chargingTime | 若在充电，还需充电时间 | 可读属性 |
| dischargingTime | 剩余电量 | 可读属性 |
| level | 剩余电量百分数 | 可读属性 |
| onchargingchange | 监听充电状态的改变 | 可监听事件 |
| onchargingtimechange | 监听充电时间的改变 | 可监听事件 |
| ondischargingtimechange | 监听电池可用时间的改变 | 可监听事件 |
| onlevelchange | 监听剩余电量百分数的改变 | 可监听事件 |
为什么获取电池信息的API
为什么我们需要用到battery api？现在许多移动端apps都内嵌着web浏览器包装的（不再是完全native的应用）。所以我们需要一个方法去获取系统的信息，app有一些过程是`十分耗电的，然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。
预加载——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张页面（假设这些页面并不大）
预先加载在网站中许多网页都会用到的图片
预先加载网站搜索的结果的页面
资源搜索网站大全https://55wd.com 广州品牌设计公司http://www.maiqicn.com
监听屏幕旋转变化接口: ——orientationchange
这个 API 可以将你手机是否横屏的情况暴露给需要知道的人知道。
screenOrientation:function () {
let self = this;
let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
self.angle = orientation.angle;
});
}
| orientation.angle 值 | 屏幕方向 |
|---|---|
| 0 | 竖屏 |
| 90 | 向左横屏 |
| -90/270 | 向右横屏 |
| 180 | 倒屏 |
通过这个 API 我们在横屏和竖屏的时候可以添加一些动作或者是样式的改变。
/* 竖屏 */
@media screen and (orientation: portrait) {
// some css code
}
/* 横屏 */
@media screen and (orientation: landscape) {
// some css code
}手机震动: ——window.navigator.vibrate(200)
vibrateFun:function (){
let self = this;
if (navigator.vibrate) {
navigator.vibrate([500, 500, 500, 500, 500 ,500 , 500, 500, 500, 500]);
} else {
self.vibrateInfo = "您的设备不支持震动";
}
// 清除震动
navigator.vibrate(0);
// 持续震动
setInterval(function () {
navigator.vibrate(200);
}, 500);
}当前语言: ——navigator.language
不同浏览器返回的值稍微有点差异。你可以通过以下封装好的方法来消除这种差异：
function getThisLang() {
const langList = ['cn', 'hk', 'tw', 'en', 'fr'];
const langListLen = langList.length;
const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase();
for (let i = 0; i < langListLen; i++) {
let lang = langList[i];
if (thisLang.includes(lang)) {
return lang
} else {
return'en'
}
}
}联网状态: ——navigator.onLine
这个 API 可以告诉让你知道你的设备的网络状态是否连接着。
function mounted() {
let self = this;
window.addEventListener('online', self.updateOnlineStatus, true);
window.addEventListener('offline', self.updateOnlineStatus, true);
}
methods: {
updateOnlineStatus: function() {
var self = this;
self.onLineInfo = navigator.onLine ? "online": "offline";
}
}页面可编辑: ——contentEditable
这个 API 可以使页面所有元素成为可编辑状态，使浏览器变成你的编辑器。
- 你可以在地址栏输入 data:text/html,<html contenteditable>, 这样浏览器就变成了编辑器。
使用场景：
需求 —— 页面需要一个文本输入框。
- 该文本输入框默认状态下有默认文本提示信息
- 文本框输入状态下其高度会随文本内容自动撑开
像这样的需求我们就可以使用 <div contentEditable='true'></div> 代替 <textarea>标签。
不过 contentEditable=‘true’ 是不会有 placeholder 的，那 placeholder 怎么办呢？可以使用如下代码
<div class = 'haveInput' contentEditable = 'true' placeholder = '请输入'></div>
// css样式
.haveInput: before {
content: attr(placeholder);
display: block;
color: #333;
}浏览器活跃窗口监听: ——window.onblur & window.onfocus
这两个 api 分别表示窗口失去焦点和窗口处于活跃状态。
浏览其他窗口、浏览器最小化、点击其他程序等， window.onblur 事件就会触发;
回到该窗口， window.onfocus 事件就会触发。
例子（微信网页版的消息提示）：
mounted() {
let self = this;
window.addEventListener('blur', self.doFlashTitle, true);
window.addEventListener('focus', function() {
clearInterval(self.timer);
document.title = '微信网页版';
}, true);
},
methods: {
doFlashTitle: function() {
var self = this;
self.timer = setInterval(() = >{
if (!self.flashFlag) {
document.title = "微信网页版";
} else {
document.title = `微信（$ {
self.infoNum
}）`;
}
self.flashFlag = !self.flashFlag
},500)
}
}
