navigator的一些冷知识

 

{
    监听屏幕旋转变化接口: orientationchange
    orientation.angle : 0 竖屏 , 90 向左横屏 , -90/270 向右横屏 , 180 倒屏 
}
screenOrientation: function(){
    let self = this;
    let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        self.angle = orientation.angle;
    });
},

 

{
    电池状态：navigator.getBattery()
    charging：是否充电
    chargingTime：还需充电时间
    dischargingTime：剩余电量
    level：剩余电量百分数
    onchargingchange：监听充电状态的改变 --可监听事件
    onchargingtimechange：监听充电时间的改变 --可监听事件
    ondischargingtimechange： 监听电池可用时间的改变 --可监听事件
    onlevelchange：监听剩余电量百分数的改变 --可监听事件
}
getBatteryInfo: function(){
    let self = this;
    if(navigator.getBattery){
        navigator.getBattery().then(function(battery) {
            // 判断是否在充电
            self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
            // 电池充电状态改变事件
            battery.addEventListener('chargingchange', function(){
                self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
            });
        });
    }else{
        self.batteryInfo = '不支持电池状态接口';
    }
},

 

{
    让你的手机震动: window.navigator.vibrate(200)
    测试发现只有UC浏览器目前支持
}
vibrateFun: function(){
    let self = this;
    if( navigator.vibrate ){
        navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);
    }else{
        self.vibrateInfo = "您的设备不支持震动";
    }
    <!--
    // 清除震动 
    navigator.vibrate(0);
    // 持续震动
    setInterval(function() {
        navigator.vibrate(200);
    }, 500);
    -->
},

 

{
    当前语言：navigator.language
}
getThisLang：function(){
    const langList = ['cn','hk','tw','en','fr'];
    const langListLen = langList.length;
    const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase();
    for( let i = 0; i < langListLen; i++ ){
        let lang = langList[i];
        if(thisLang.includes(lang)){
            return lang
        }else {
          return 'en'
        }
    }
}

 

//返回浏览器的内部名称
window.navigator.appCodeName 

//返回浏览器版本号
window.navigator.appVersion

//获取设备的网络连接信息
window.navigator.onLine

//返回用户的位置信息
let geolocation = window.navigator.geolocation
{
    var watchID = navigator.geolocation.watchPosition(function(position) {
      do_something(position.coords.latitude, position.coords.longitude);
    });
}

//浏览器 UI 的语言
window.navigator.language

//表示网站访客所使用的语言
window.navigator.languages

//MediaDevices 该对象可提供对相机和麦克风等媒体输入设备的连接访问,也包括屏幕共享
var mediaDevices = window.navigator.mediaDevices;
mediaDevices.getUserMedia({ audio: true, video: true }).then(function (stream) {

}).catch(function (err) {

})