本文整理JavaScript中navigator对象的实用接口，涵盖屏幕旋转监听、电池状态获取、设备震动及语言检测等功能。通过具体代码示例，展示如何获取屏幕角度、监听充电状态、触发手机震动以及判断当前语言环境，帮助开发者利用这些API提升Web应用的交互体验。
监听屏幕旋转变化接口: 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) {
})以上就是JS导航栏navigator的一些冷知识的详细内容，更多关于JS导航栏navigator的资料请关注本站其它相关文章！