WEB API接口

来源：互联网发布：淘宝号买卖平台编辑：程序博客网时间：2024/04/30 07:45

WEB API 接口

说明

列举一些不常用的 Web API 接口

震动API (Vibration)
通知API（Notifications）
地理位置API（Geolocation）
全屏API（Fullscreen）

参考

JavaScript 标准参考教程
MDN

1. 震动API (Vibration)

大多数现代移动设备包括振动硬件，允许通过接口触发设备震动，如果设备不支持则没有反馈

    // 单次震动，参数为代表震动时长的数字    window.navigator.vibrate(200);    // 多次震动，参数为交替震动和停止的时长的数组    window.navigator.vibrate([200, 100, 300]); // 表示震动 200 ms ,停止 100ms 后再震动 300ms    // 停止震动，设置参数为 0 或者 空白数组 即可取消震动    window.navigator.vibrate([200, 100, 400, 100, 1000]);    setTimeout(function () {        window.navigator.vibrate(0);    }, 400)

2. 通知API（Notifications）

允许网页或者应用程序在系统级别发送在页面外部显示的通知，这样即使应用程序空闲或者在后台，Web应用程序也会想用户发送信息

    // 查看用户是否允许通知，相同的域名只要获取一次权限，只有用户允许才能使用通知API    console.log(Notification.permission);     /*        default: 默认，未选择        granted: 允许通知        denied: 用户拒绝    */    // 向用户请求权限，当用户状态为 default 也就是没有选择是否接收的时候可以使用    Notification.requestPermission().then(function (status) {        if (status === 'granted') {            console.log('允许通知');        } else if (status === 'denied') {            console.log('拒绝通知');        }    })    // 向用户推送通知，需要有权限后才行    const title = '通知标题';    const options = {        body: '通知的内容',        tag: 'noti', // 代表通知的一个识别标签，相同tag时只会打开同一个通知窗口        icon: 'http://xxx.png', // 通知图标         image: 'http://xxx.png', // 通知图像        data: { // 关联与此通知的数据            link: 'http://xxx.com'        },        requireInteraction: true // true 不自动关闭通知 false 自动关闭    };    const n = new Notification(title, options);    n.addEventListener('show', function () { // 当通知被显示给用户时触发        console.log('show');    });    n.addEventListener('click', function (e) { // 当用户点击通知时触发        console.log('click');        const link = e.currentTarget.data.link; // 得到 data 中数据        window.open(link, '_blank');    })    n.addEventListener('close', function () { // 当通知被关闭时触发        console.log('close');    })    n.addEventListener('error', function () { // 当通知发生错误的时候触发        console.log('error');    })

注意： Chrome 62 及以上版本，Notification API不支持 http；PC 尚可，移动端基本不支持

参考 HTML5 桌面通知：Notification API

3. 地理位置API（Geolocation）

允许通过应用程序提供当前浏览器所在位置，需要提前请求用户许可，最新版本的浏览器还要求网址是‘安全的’（https），否则不能获取地理位置信息

    // 判断是否可以使用        if (!navigator.geolocation) {        console.log('不支持定位');    } else {        console.log('支持定位');        // 获取当前定位 getCurrentPosition, 返回的是一个低精度结果        navigator.geolocation.getCurrentPosition(function (position) {            console.log(position.coords);            /*                 coords: {                     latitude: 纬度，                     longitude: 经度，                     altitude: 海拔高度,                     accuracy: 精度                 }            */        })        // 监视定位，可以响应定位数据发生的变更，回调函数会被调用多次        const successWatch = function (position) {              console.log(position);        }        const errorWatch = function (err) {              console.log(err);        }        const watchOptions = {               enableHighAccuracy: true, // 是否要求高精度的地理位置信息               maximumAge: 30000,  // 缓存的有效时间限制               timeout: 27000 // 超时限制        };        const watchID = navigator.geolocation.watchPosition(successWatch, errorWatch, watchOptions);        // 停止监听用户位置        navigator.geolocation.clearWatch(watchID);    }

注：新版本的浏览器，出于安全考虑，在非 https 环境禁止使用

4. 全屏API（Fullscreen）

控制全屏显示，让一个 Element 节点占满整个屏幕，不同浏览器使用需要加上前缀

    const box = document.querySelector('#box');    // 判断文档是否可以切换到全屏状态    const fullscreenEnabled =          document.fullscreenEnabled ||          document.mozFullScreenEnabled ||          document.webkitFullscreenEnabled ||          document.msFullscreenEnabled;    if (fullscreenEnabled) {        box.onclick = function () {          // 查找是否有处于全屏状态的节点            const fullscreenElement =                document.fullscreenElement ||                document.mozFullScreenElement ||                document.webkitFullscreenElement;            if (!fullscreenElement) {                launchFullscreen(box);            } else {                exitFullscreen();            }        }    }    // 使某一个节点全屏显示    function launchFullscreen(element) {        if(element.requestFullscreen) {            element.requestFullscreen();        } else if(element.mozRequestFullScreen) {            element.mozRequestFullScreen();        } else if(element.msRequestFullscreen){            element.msRequestFullscreen();        } else if(element.webkitRequestFullscreen) {            element.webkitRequestFullScreen();        }    }    // 取消全屏    function exitFullscreen() {        if (document.exitFullscreen) {            document.exitFullscreen();        } else if (document.msExitFullscreen) {            document.msExitFullscreen();        } else if (document.mozCancelFullScreen) {            document.mozCancelFullScreen();        } else if (document.webkitExitFullscreen) {            document.webkitExitFullscreen();        }    }

放大一个节点时，Firefox和Chrome在行为上略有不同, Firefox自动为该节点增加一条CSS规则，将该元素放大至全屏状态，width: 100%; height: 100%，而Chrome则是将该节点放在屏幕的中央，保持原来大小，其他部分变黑。为了让Chrome的行为与Firefox保持一致，可以自定义一条CSS规则。来源

    #box{        width: 300px;        height: 300px;        border: 1px solid green;        background: #969696;        &:-webkit-full-screen{            width: 100%;            height: 100%;        }    }

注意：如下给 ‘flot’ 设置绝对定位后，如果使 ‘box’ 全屏显示，那么’flot’ 会被覆盖而显示不出

    <body>        <div id="app">            <div id="box">                this is box            </div>        </div>        <div id="flot">flot</div>    </body>

阅读全文

0 0