1. 首页

你(可能)不知道的 web api

简介

作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法、用处以及浏览器支持度,同时我也分别为这几个api都做了一个简单的demo(真的很简单,样式等于没有~)这几个api分别是:

  • page lifecycle
  • onlineState
  • 利用deviceOrientation制作一个随着手机旋转的正方体
  • battery status
  • custom event
  • 利用execCommand完成一个简单的富文本

page lifecycle(网页生命周期)

介绍

我们可以用document.visibitilityState来监听网页可见度,是否卸载,但是在手机和电脑上都会现这种情况,就是比如说页面打开过了很久没有打开,这时你看在浏览器的tab页中看着是可以看到内容的,但是点进去却需要加载。chrome68添加了 freezeresume事件,来完善的描述一个网页从加载到卸载,包括浏览器停止后台进程,释放资源各种生命阶段。从一个生命周期阶段到另外一个生命周期阶段会触发不同的事件,比如onfocus,onblur,onvisibilitychange,onfreeze等等,通过这些事件我们可以响应网页状态的转换。具体的教程推荐大家看看阮一峰大神的教程

用法


window.addEventListener('blur',() => {}) window.addEventListener('visibilitychange',() => { // 通过这个方法来获取当前标签页在浏览器中的激活状态。 switch(document.visibilityState){ case'prerender': // 网页预渲染 但内容不可见 case'hidden': // 内容不可见 处于后台状态,最小化,或者锁屏状态 case'visible': // 内容可见 case'unloaded': // 文档被卸载 } });

用处

大家可以看下这个demo

你(可能)不知道的 web api

所以说,这个API的用处就是用来响应我们网页的状态,比如说我们的页面是在播放视频或者是一个网页的游戏,你可以通过这个API来去做出对应的响应,暂停视频,游戏暂停等等。

浏览器支持度

page visibilituState

你(可能)不知道的 web api

online state(网络状态)

这个API就很简单了,就是获取当前的网络状态,同时也有对应的事件去响应网络状态的变化。

用法


window.addEventListener('online',onlineHandler) window.addEventListener('offline',offlineHandler)

用处

比如说我们的网站是视频网站,正在播放的时候,网络中断了,我们可以通过这个API去响应,给用户相应的提示等等。

浏览器支持度

你(可能)不知道的 web api

Vibration(震动)

让手机震动~~~ 嗯,就这么简单。

用法


// 可以传入一个大于0的数字,表示让手机震动相应的时间长度,单位为ms navigator.vibrate(100) // 也可以传入一个包含数字的数组,比如下面这样就是代表震动300ms,暂停200ms,震动100ms,暂停400ms,震动100ms navigator.vibrate([300,200,100,400,100]) // 也可以传入0或者一个全是0的数组,表示暂停震动 navigator.vibrate(0)

用处

用来给用户一个提示,比如说数据校验失败,当然震动不止这点作用,大家自己去扩展吧~~~

浏览器支持度

你(可能)不知道的 web api

device orientation(陀螺仪)

通过绑定事件来获取设备的物理朝向,可以获取到三个数值,分别是:

  • alpha:设备沿着Z轴的旋转角度

你(可能)不知道的 web api

  • beta:设备沿着X轴的旋转角度

你(可能)不知道的 web api

  • gamma:设备沿着Y轴的旋转角度

你(可能)不知道的 web api

用法


window.addEventListener('deviceorientation',e => { console.log('Gamma:',e.gamma); console.log('Beta:',e.beta); console.log('Alpha:',e.Alpha); })

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

用处

这种自然是web VR 中的使用场景会相对较多。这是我写的一个小demo

你(可能)不知道的 web api

浏览器支持度

你(可能)不知道的 web api

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('当前浏览器不支持~~~') }

用处

用来温馨的提示用户当前电量~~~

浏览器支持度

这个浏览器的支持度很低。。。。

你(可能)不知道的 web api

execCommand 执行命令

当将HTML文档切换成设计模式时,就会暴露出 execcommand 方法,然后我们可以通过使用这个方法来执行一些命令,比如复制,剪切,修改选中文字粗体、斜体、背景色、颜色,缩进,插入图片等等等等。

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

用法

用法也很简单,这里简单介绍几个,详细的介绍大家可以去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,效果如下:

你(可能)不知道的 web api

浏览器支持度

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

最后

就先介绍到这些,web api越来越多,当然每个人不可能全都熟记于心,这篇文章也只是简单介绍一下,还有很多有意思而且很重要的API,比如:web componentsservice workergenric sensor等等,不过这些都有很多人在钻研,同时文档相对较多。 相信你看完这些至少已经知道这些API的大概用法了,如果有兴趣了解用法的话,可以去看下我写的demo,也可以去看看MDN文档去深入研究一下。

参考

链接:https://juejin.im/post/5c1606d9f265da613d7bf7a4

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:你(可能)不知道的 web api

链接:https://www.javascriptc.com/2909.html

« 带你解锁多种JavaScript数组去重骚姿势
Vue 3 Composition API 实战前瞻»
Flutter 中文教程资源

相关推荐

QR code