Navigator表示用户代理的状态和标识。Navigator中存在大量的关于浏览器代理的相关信息。
每个窗口都有一个关联的Navigator,这是一个Navigator对象。创建Window对象后,Navigator被设置为在Window对象的相关领域中创建的新Navigator对象。
clipboard
clipboard:该属性返回一个可以读写剪切板内容的 Clipboard 对象
const clipboard = navigator.clipboard;
read():从剪贴板读取数据,返回剪贴板数据的类型
clipboard.read().then(res => {
console.log(res[0].types[0]);
});
readText():从剪贴板读取文本,读取剪贴板上的内容
clipboard.readText().then(res => {
console.log(res[0]);
})
write():向剪贴板写入数据
let data = new DataTransfer();
data.items.add("text/plain", text);
clipboard.write(data).then(res => {
console.log(res)
})
writeText():向剪贴板写入文本
clipboard.writeText('hello world').then(res => {
console.log(res);
});
每个方法都返回promise对象
geolocation
geolocation:返回一个 Geolocation 对象,通过这个对象可以访问到设备的位置信息
console.log(navigator.geolocation);
方法
getCurrentPosition():
参数
- success:成功回调函数
- error:失败回调函数
- options:配置对象
let geolocation = navigator.geolocation;
geolocation.getCurrentPosition((res) => {
console.log(res.cords)
},(err) => {
console.log(err);
},{
// 是否使用高精度
enableHighAccuracy: true,
// 超时时间
timeout: 5000,
// 最大缓存时间
maximumAge: 0
});
geolocation常用来获取地理位置,结合其他地图API获取天气或者坐标对应的城市、省份等地理信息。
用户代理基本属性
cookieEnabled: 返回一个布尔值,来表示当前页面是否启用了 cookie
language:返回一个表示用户偏好语言(通常是浏览器界面语言)的字符串
languages:返回表示用户首选语言的字符串数组。
mediaDevices:返回MediaDevices对象,该对象提供对连接的媒体输入设备(如摄像机和麦克风)的访问以及屏幕共享
mediaSession:返回一个MediaSession对象,该对象可用于与浏览器共享元数据和有关文档正在处理的媒体的当前播放状态的其他信息
onLine:返回浏览器的联机状态
storage:返回用于访问当前站点或应用程序浏览器的总体存储功能的单一StorageManager对象
userAgent:返回当前浏览器的用户代理字符串
console.log(navigator.userAgent);
该属性常用来进行浏览器检测。
function client(){
let engine = {
// 是否是IE引擎,
ie:false ,
gecko:false,
webkit:false,
kHtml:false,
opera:false,
// 引擎版本
version:0
};
// 获取浏览器
let browser = {
ie: false,
firefox: false,
chrom: false,
safari: false,
opera: false,
version: 0
}
let system = {
win:false,
mac:false,
x11:false,
systemName:''
}
let ua = navigator.userAgent;
let p = navigator.platform;
if(p.indexOf('Win') === 0){
system.win = true;
system.systemName = 'Window';
} else if(p.indexOf('Mac') === 0){
system.mac = true;
system.systemName = 'Mac OS';
} else if(p === 'X11' || p.indexOf('Linux') === 0){
system.x11 = true;
system.systemName = 'Linux';
}
// 获取opera的引擎
if(window.opera){
engine.opera = true;
engine.version = browser.version = window.opera.version;
browser.name = 'Opera';
} else if(/AppleWebkit\/\/(\S+)/.test(ua)){
engine.webkit = true;
engine.version = RegExp['$1'];
if(/Chrom\/(\S+)/.test(ua)){
browser.chrom = true;
browser.version = RegExp['$1'];
browser.name = 'Chrom';
} else {
browser.safari = true;
if(/Version\/(\S+)/.test(ua)){
browser.safari = true;
browser.version = RegExp['$1'];
browser.name = 'Safari';
}
}
} else if(/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)){
engine.gecko = true;
engine.version = RegExp['$1'];
if (/Firefox\/(\S+)/.test(ua)){
browser.firefox = true;
browser.version = RegExp['$1'];
browser.name = 'Firefox';
}
} else if(/MSIE([^;]+)/.test(ua)){
engine.ie = true;
engine.version = browser.version = RegExp['$1'];
browser.name = 'internet Explorer';
}
return {
engine,
system
};
}
方法
getBattery():提供有关系统电池的信息
console.log(navigator.getBattery());
getBettary()通常用于当电池电量低对数据提前进行保存或者提醒用户手动保存数据,也可以根据电量的变化调用不同的能力。
share():调用设备的本地共享机制来共享数据,如文本、URL或文件
参数:
- data:包含要共享的数据的对象。必须至少指定url、text、title、files字段之一
navigator.share('hello world');
navigator.share('https://blog.csdn.net/qq_40850839/article/details/127457271');
vibrate():使设备(有震动硬件)产生有频率的震动
参数:
- pattern:提供一个震动、暂停间隔的模式,传递一个值只震动一次,震动多次需要传递数组,如果传递0、[]、元素全部为零的数组会停止震动
// 震动一次,时长为500ms
navigator.vibrate(500);
// 震动多次
navigator.vibrate([200,1000,400,200,500,300]);
// 停止震动或者不震动
navigator.vibrate(0);
navigator.vibrate([]);
navigator.vibrate([0,0,0,0,0])
sendBeacon():用于通过 HTTP POST 将少量数据 异步 传输到 Web 服务器。该方法返回一个promise对象
参数:
- url:服务器地址
- data:要发送的数据,类型包括ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 、URLSearchParams