频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
列举一些不常用的 Web API 接口
2017-11-14 11:31:49      个评论    来源:mjzhang1993的博客  
收藏   我要投稿

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: 'https://xxx.png', // 通知图标 
        image: 'https://xxx.png', // 通知图像
        data: { // 关联与此通知的数据
            link: 'https://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’ 会被覆盖而显示不出

    

this is box

flot

点击复制链接 与好友分享!回本站首页
上一篇:移动端webkit-user-select:none导致input/textarea输入框无法输入问题解决办法
下一篇:正则表达式,表单验证HTML、CSS代码实例
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站