那些可以一用的浏览器api

Fork Me On Github
zodream 编程技术 Html 2018年12月

page lifecycle(网页生命周期)

document.visibitilityState 来监听网页可见度,是否卸载

focus 事件

focus事件在页面获得输入焦点时触发。

blur 事件

blur事件在页面失去输入焦点时触发。

visibilitychange 事件

visibilitychange事件在网页可见状态发生变化时触发.

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

freeze 事件

freeze事件在网页进入挂起状态时触发。

resume 事件

resume事件在网页离开挂起,恢复时触发。

pageshow 事件

pageshow事件在用户加载网页时触发。这时,有可能是全新的页面加载,也可能是从缓存中获取的页面。如果是从缓存中获取,则该事件对象的event.persisted属性为true,否则为false

pagehide 事件

pagehide事件在用户离开当前网页、进入另一个网页时触发。它的前提是浏览器的 History 记录必须发生变化,跟网页是否可见无关。

beforeunload 事件

beforeunload事件在窗口或文档即将卸载时触发。

unload 事件

unload事件在页面正在卸载时触发

online state(网络状态)

js
   
window.addEventListener('online',onlineHandler)

window.addEventListener('offline',offlineHandler)
123

Vibration(震动)

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

device orientation(陀螺仪)

js
     
window.addEventListener('deviceorientation',e => {
    console.log('Gamma:',e.gamma);  // 设备沿着Y轴的旋转角度
    console.log('Beta:',e.beta);    //设备沿着X轴的旋转角度
    console.log('Alpha:', e.alpha);  //设备沿着Z轴的旋转角度
})
12345

注意

alpha 是以手机自带指南针为标准,及手机认为的南方为 0 ,需要注意手机不一定支持指南针,所以会出现偏差

battery status(电量)

js
                  
// 通过这个方法来获取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;
    }
})
123456789101112131415161718

【参考】

  1. 你(可能)不知道的web api
  2. Page Lifecycle API 教程
点击查看全文
0 428 0