- Page Visibility API - Page Visibility
- 全屏 API API - Full Screen
- Access to the camera and microphone --getUserMedia API
- 电池 API - API Battery
- Preloaded --Link Prefetching
- Monitor screen rotation change Interface: --orientationchange
- Mobile phone vibration: --window.navigator.vibrate (200)
- Current language: --navigator.language
- Network status: --navigator.onLine
10. page to edit: --contentEditable
browser window active listening: --window.onblur & window.onfocus
Page Visibility API - Page Visibility
The API can be used to detect the visible page of the user, i.e. the user returns the status change of the current page or the tag tap. , Tap into effect when switching pages in the browser is minimized. (For when for several webview app switching operation can be used pageVisibility interface corresponding event listener and handling.)
page visibility of introduction:
-
document.hidden: indicates whether the page is visible, a boolean value
-
document.visibilityState：
visibilityState three values:
visible: indicates that the page is in the top page and not in a minimized window
hidden: page indicates that the page is not in front of or in a minimized window
prerender: indicates that the content page is re-rendering the page and is invisible to the user -
isibilitychange Event: change the monitor window visibility of the 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";
}
// 添加一个标题改变的监听器
document.addEventListener(visibilityChange, function(e) {
// 开始或停止状态处理
}, false);
Common use:
We can periodically refresh the contents of those pages of control, it is not visible when the page is not refreshed, showing the refresh
we can also page is visible to pause and resume audio based on the video playback
we can also according to the page visible we went to the site a user stays more precise data on this page, not just open the page without stopping on this page.
全屏 API API - Full Screen
The API allows developers to programmatically Web applications run in full screen, make Web applications more like native applications. Very simple and useful API.
FullScreen API usage is very simple, it has two modes
Launching Fullscreen Mode start full-screen 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 to exit full-screen 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 related properties, and events
currently fullscreen compatibility issues still exist, many can use browsers still need to add the relevant prefix in their respective properties and events.
- document.fullScreenElement: This attribute indicates the element to start full-screen (e.g., the video)
- document.fullScreenEnabled: This attribute indicates whether the current full-screen
- fullscreenchange event: full-screen monitor state change event
Some of css css property on fullscreen
-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 */
}
Use case: mobile terminal novels and comics full-screen viewing
Access to the camera and microphone --getUserMedia API
This API allows applications to access Web camera and microphone without a plug, the first API client support, but not yet available in the 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);
Once the current browser is supported getUserMedia, we can with a simple way to assign src video address our current video element to the user's local mobile phone video, then pulled up and connected through a local video play method of video. So we can use the local player to play.
电池 API - API Battery
This is an API for mobile applications, mainly for battery information detecting device.
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 | description | Remark |
|---|---|---|
| charging | Is charging | Readable property |
| chargingTime | If the charging, the charging time needed | Readable property |
| dischargingTime | remaining battery | Readable property |
| level | The remaining battery percentage | Readable property |
| onchargingchange | Changing the state of charge monitor | You can monitor events |
| onchargingtimechange | Monitor the charging time of change | You can monitor events |
| ondischargingtimechange | Change monitor battery available time | You can monitor events |
| onlevelchange | The percentage change in the remaining charge monitor | You can monitor events |
Why get battery information API
Why do we need to use battery api? Many apps have embedded mobile terminal with a web browser package (no longer fully native applications). So we need a way to get information systems, app there are some processes are `very power-hungry, then we need to give the user when the user starts warning messages telling the user's current low power equipment.
Preloaded --Link Prefetching
Preloaded content to provide a smooth web browsing experience for the viewer. The api we occasionally use to business
What is the link preloaded
Link prefetching is the best time to use the browser to download or preload some users may be one of the browsers mechanism for browsing documents in the near future.
!-- 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" /]
When using a link preloaded whether pre-loaded on your own website, you can refer to the following points:
When you do a similar slideshow pages to load in advance of nearly 1-3 Zhang page (assuming that the page is not large)
Pre-loaded in the site will be used in many pages of pictures
Pre-loaded Site Search results page
Monitor screen rotation change Interface: --orientationchange
This API can be the case if your phone landscape exposed to people who need to know to know.
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 value | Screen orientation |
|---|---|
| 0 | Portrait |
| 90 | Left horizontal screen |
| -90/270 | Right horizontal screen |
| 180 | Down screen |
Through this API, we can add some action or change in the style of landscape and portrait screen time.
/* 竖屏 */
@media screen and (orientation: portrait) {
// some css code
}
/* 横屏 */
@media screen and (orientation: landscape) {
// some css code
}
Mobile phone vibration: --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);
}
Current language: --navigator.language
Values for different browser returns a little bit different. You can eliminate this discrepancy by encapsulated method:
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'
}
}
}
Network status: --navigator.onLine
This API can tell let you know if your device is connected to the network status.
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";
}
}
Page editable: --contentEditable
This API can make all the elements of a page to become editable, the browser into your editor.
- You can enter in the address bar
data:text/html,<html contenteditable>, so that the browser becomes editor.
Use Scenario:
Demand - page needs a text entry box.
- There are default text message under the text entry box by default
- Under a state in which the height of the text box is automatically input with text distraction
Such as this demands that we can use <div contentEditable='true'></div>instead of <textarea>labels.
But contentEditable = 'true' is no placeholder, that placeholder how to do it? You can use the following code
<div class = 'haveInput' contentEditable = 'true' placeholder = '请输入'></div>
// css样式
.haveInput: before {
content: attr(placeholder);
display: block;
color: #333;
}
Active browser window listener: --window.onblur & window.onfocus
Both api represent the window loses focus and the window is active.
Other browser window, minimize the browser, click other programs, window.onblur event is triggered;
back to the window, window.onfocus event triggers.
Examples of (micro-channel version of the page message prompts):
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)
}
}