你可能不知道的web api
简介
作为前端工作者,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法、用处以及浏览器支持度,同时我也分别为这几个api都做了一个简单的demo(真的很简单,样式等于没有~)这几个api分别是:
- page lifecycle
- onlineState
- 利用deviceOrientation制作一个随着手机旋转的正方体
- battery status
- custom event
- 利用execCommand完成一个简单的富文本
page lifecycle(网页生命周期)
介绍
我们可以用document.visibitilityState来监听网页可见度,是否卸载,但是在手机和电脑上都会现这种情况,就是比如说页面打开过了很久没有打开,这时你看在浏览器的tab页中看着是可以看到内容的,但是点进去却需要加载。chrome68添加了 freeze和 resume事件,来完善的描述一个网页从加载到卸载,包括浏览器停止后台进程,释放资源各种生命阶段。从一个生命周期阶段到另外一个生命周期阶段会触发不同的事件,比如onfocus,onblur,onvisibilitychange,onfreeze等等,通过这些事件我们可以相应网页状态的转换。具体的教程推荐大家看看阮一峰大神的教程。
用法
window.addEventListener('blur',() => {})
window.addEventListener('visibilitychange',() => {
// 通过这个方法来获取当前标签页在浏览器中的激活状态。
switch(document.visibilityState){
case'prerender': // 网页预渲染 但内容不可见
case'hidden': // 内容不可见 处于后台状态,最小化,或者锁屏状态
case'visible': // 内容可见
case'unloaded': // 文档被卸载
}
});
复制代码
用处
大家可以看下这个demo
所以说,这个API的用处就是用来相应我们网页的状态,比如说我们的页面是在播放视频或者是一个网页的游戏,你可以通过这个API来去做出对应的相应,暂停视频,游戏暂停等等。
浏览器支持度
page visibilituState
online state(网络状态)
这个API就很简单了,就是获取当前的网络状态,同时也有对应的事件去相应网络状态的变化。
用法
window.addEventListener('online',onlineHandler)
window.addEventListener('offline',offlineHandler)
复制代码
用处
比如说我们的网站是视频网站,正在播放的时候,网络中断了,我们可以通过这个API去相应,给用户相应的提示等等。
浏览器支持度
这个是page visibility
Vibration(震动)
让手机震动~~~ 嗯,就这么简单。
用法
// 可以传入一个大于0的数字,表示让手机震动相应的时间长度,单位为ms
navigator.vibrate(100)
// 也可以传入一个包含数字的数组,比如下面这样就是代表震动300ms,暂停200ms,震动100ms,暂停400ms,震动100ms
navigator.vibrate([300,200,100,400,100])
// 也可以传入0或者一个全是0的数组,表示暂停震动
navigator.vibrate(0)
复制代码
用处
用来给用户一个提示,比如说数据校验失败,当然震动不止这点作用,大家自己去扩展吧~~~
浏览器支持度
device orientation(陀螺仪)
通过绑定事件来获取设备的物理朝向,可以获取到三个数值,分别是:
- alpha:设备沿着Z轴的旋转角度
- beta:设备沿着X轴的旋转角度
- gamma:设备沿着Y轴的旋转角度
用法
window.addEventListener('deviceorientation',e => {
console.log('Gamma:',e.gamma);
console.log('Beta:',e.beta);
console.log('Alpha:',e.Alpha);
})
复制代码
用处
这种自然是web VR 中的使用场景会相对较多。这是我写的一个小demo
浏览器支持度
battery status
这个API就使用来获取当前的电池状态
用法
// 首先去判断当前浏览器是否支持此API
if ('getBattery' in navigator) {
// 通过这个方法来获取battery对象
navigator.getBattery().then(battery => {
// battery 对象包括中含有四个属性
// charging 是否在充电
// level 剩余电量
// chargingTime 充满电所需事件
// dischargingTime 当前电量可使用时间
const { charging, level, chargingTime, dischargingTime } = battery;
// 同时可以给当前battery对象添加事件 对应的分别时充电状态变化 和 电量变化
battery.onchargingchange = ev => {
const { currentTarget } = ev;
const { charging } = currentTarget;
};
battery.onlevelchange = ev => {
const { currentTarget } = ev;
const { level } = ev;
}
})
} else {
alert('当前浏览器不支持~~~')
}
复制代码
用处
用来温馨的提示用户当前电量~~~
浏览器支持度
这个浏览器的支持度很低。。。。
execCommand 执行命令
当将HTML文档切换成设计模式时,就会暴露出 execcommand 方法,然后我们可以通过使用这个方法来执行一些命令,比如复制,剪切,修改选中文字粗体、斜体、背景色、颜色,缩进,插入图片等等等等。
用法
用法也很简单,这里简单介绍几个,详细的介绍大家可以去MDN上看看。 这个API接受三个参数,第一个是要执行的命令,第二个参数mdn上说是Boolean用来表示是否展现用户界面,但我也没测试出来有什么不同,第三个参数就是使用对应命令所需要传递的参数。
// 一般不会直接去操作我们本身的HTML文档,可以去插入一个iframe然后通过contentDocument来获取、操作iframe中的HTML文档。
let iframe = document.createElement('ifram');
let doc = iframe.contentDocument;
// 首先要将HTML文档切换成设计模式
doc.designMode = 'on';
// 然后就可以使用execCommand 这个命令了;
// 执行复制命令,复制选中区域
doc.execCommand('copy')
// 剪切选中区域
doc.execCommand('cut')
// 全选
doc.execCommand('selectAll')
// 将选中文字变成粗体,同时接下来输入的文字也会成为粗体,
doc.execCommand('bold')
// 将选中文字变成斜体,同时接下来输入的文字也会成为斜体,
doc.execCommand('italic')
// 设置背景颜色,,比如设置背景色为红色,就传入 'red'即可
doc.execCommand('backColor',true,'red')
复制代码
用处
我用这些命令简单的写了一个富文本的demo,大家可以看一下Demo,效果如下:
浏览器支持度
CustomEvent (自定义事件)
大家都知道各种事件是如何绑定的,但是有时候这些事件不够用呢,custom event就可以解决这样的问题。
用法
let dom = document.querySelector('#app');
// 绑定事件, 传递过来的值可以通过ev.detail 来获取
dom.addEventListener('log-in',(ev) => {
const { detail } = ev;
console.log(detail); // hello
})
// 派发事件,需要传入两个参数,一个是事件类型,另外一个是一个对象,detail就是传递过去的值
dom.dispatchEvent(new CustomEvent('log-in',{
detail:'hello'
}))
复制代码
用处
绑定自定义事件,最近很火的框架Omi,其中的自定义事件就是基于customEvent实现的。
浏览器支持度
最后
就先介绍到这些,web api越来越多,当然每个人不可能全都熟记于心,这篇文章也只是简单介绍一下,还有很多有意思而且很重要的API,比如:web components, service worker,genric sensor等等,不过这些都有很多人在钻研,同时文档相对较多。 相信你看完这些至少已经知道这些API的大概用法了,如果有兴趣了解用法的话,可以去看下我写的demo,也可以去看看MDN文档去深入研究一下。
参考
作者:awesome23
地址:https://juejin.im/user/5ac5e48cf265da238a30ada4
你可能不知道的web api的更多相关文章
- 你(可能)不知道的web api
你(可能)不知道的web api 简介 作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍 ...
- 你(可能)不知道的 web api
转自奇舞周刊 简介 作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法.用 ...
- 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇
老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...
- 你所不知道的html5与html中的那些事(五)——web图像
文章简介: 现在的页面,一般都离不开图像,而怎么做才能让我们的页面中的图像加载的又快又好呢?在优化页面速度的时候还有什么事是你所不知道的呢? 下面看看今天我为大家带来了哪些关于we ...
- Web APi 2.0优点和特点?在Web APi中如何启动Session状态?
前言 曾几何时,微软基于Web服务技术给出最流行的基于XML且以扩展名为.asmx结尾的Web Service,此服务在.NET Framework中风靡一时同时也被.NET业界同仁所青睐,几年后在此 ...
- 【ASP.NET Web API教程】1 ASP.NET Web API入门
原文 [ASP.NET Web API教程]1 ASP.NET Web API入门 Getting Started with ASP.NET Web API第1章 ASP.NET Web API入门 ...
- ASP.NET Core Web API 与 SSL
SSL 一直没有真正研究过SSL,不知道下面的理解是否正确. SSL是Secure Sockets Layer的缩写,它用来保护服务器和客户端之前的通信.它是基于信任+加密的概念. 在介绍SSL的原理 ...
- [JavaScript]为JS处理二进制数据提供可能性的WEB API
写这篇博客的起源是在div.io上的一篇文章<你所不知道的JavaScript数组>by 小胡子哥下的评论中的讨论. 因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那 ...
- 你所不知道的库存超限做法 服务器一般达到多少qps比较好[转] JAVA格物致知基础篇:你所不知道的返回码 深入了解EntityFramework Core 2.1延迟加载(Lazy Loading) EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public? 藏在正则表达式里的陷阱 两道面试题,带你解析Java类加载机制
你所不知道的库存超限做法 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...
随机推荐
- centos7编译安装nginx
一.安装依赖包 yum install gcc gcc-c++ autoconf automake zlib zlib-devel openssl openssl-devel pcre-devel 二 ...
- Game Engine Architecture 9
[Game Engine Architecture 9] 1.Formatted Output with OutputDebugString() int VDebugPrintF(const char ...
- oracle数值函数 abs()、 ceil()、 cos()、 cosh()
1.abs绝对值函数 格式 abs(number) 即abs(数值) 例如 abs(100) 结果为 100,abs(-100)结果为100: 2.ceil用来取数值最小整数函数 格式 ceil(nu ...
- 从 PC 卸载 Office
https://support.office.com/zh-cn/article/%E4%BB%8E-PC-%E5%8D%B8%E8%BD%BD-Office-9dd49b83-264a-477a-8 ...
- 双硬盘,win10安装到固态盘
1.PE下格式化固态盘的系统盘 2.打开DG分区工具,查看固态盘的系统盘是否为激活状态,红色为激活,如果不是,激活一下 3.用windows安装器,或者hdd安装win10到固态盘 4.bios中启动 ...
- 对palindrome的常用判断
判断String是否为palindrome:Two Pointers(left & right) 同时边扫边check 当前两边的char是否相同 code public boolean is ...
- 好用的.NET控制台测试项目
在工作和学习上,我们经常需要创建项目,引用些其他的库,测试下自己的想法是否正确,需要捕捉一下异常.调用一下异步方法.记录一下log等等,这样的项目都是需要花费时间,为了较少花费的时间,产生了一个这样的 ...
- 百度SEO怎么做 影响百度seo排名的因素
现在SEO的最新算法.技巧,希望大家运用这些技巧,都像我一样能够在百度上获得客户: 第一步:了解搜索引擎的工作原理爬——抓——处——排——展 第二步:大家要建立一个整体框架,影响SEO的排名有哪些因素 ...
- 7E - The sum problem
Given a sequence 1,2,3,......N, your job is to calculate all the possible sub-sequences that the sum ...
- hbase-多租户
namespace 不同表在不同的namespace,可以做用户的权限控制 资源限制 限制每时间段请求的数量和大小 设置表的空间大小 修改hbase-site.xml文件 添加两个配置 hbase.q ...