关于浏览器的navigator对象
今天,在刷视频的时候,无意看到了一个利用浏览器对剪贴板写入或者访问的方法,返回的都是promise
对象,即Clipboard.writeText
和clipboard.readText
两个方法。
// 写入剪贴板
navigator.clipboard.writeText('aaa')
// 读取剪贴板
navigator.clipboard.readText().then(
(text) => {
console.log(text)
},
(error) => {
console.log(error.message)
}
)
需要注意的是,剪贴板读取的时候需要申请权限,如果用户不同意授权浏览器会抛出错误。
也可以对剪贴板写入二进制流以写入和访问图片等资源。
挖坑。
然后我就挺好奇,这个navigator是什么东西,我就打印了下这个对象:
console.log(navigator)
看到了几个比较有意思的属性,比如:
appCodeName: "Mozilla",
appName: "Netscape",
appVersion:"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36 Edg/95.0.1020.44",
bluetooth: Bluetooth,
clipboard: Clipboard,
geolocation: Geolocation {},
我使用的是Edge浏览器,但是appName用的是已经死透多少年的网景(关于微软和网景不得不说的那些事),appVersion感觉和userAgent很像,还能够看到蓝牙,剪贴板,位置。那就试试再玩下蓝牙和位置吧。
关于navigator的中各种属性的具体内容,可以参照此处
位置
位置的获取主要有两个,一个是获取当前定位的getCurrentPosition
另外一个是监视定位的 watchPosition
,有三点需要注意:
首先,访问位置需要被授权,只有用户允许了,才可以访问。
其次,getCurrentPosition
位置的获取有大致位置和精确位置,这个可以通过传参的方式来获取。
之后,如果想要监视位置,可以直接调用watchPosition
就可以。
// 获取当前位置
if ('geolocation' in navigator) {
/* 地理位置服务可用 */
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position)
},
(error) => {
console.log(error)
}
)
} else {
/* 地理位置服务不可用 */
}
// 监视位置
navigator.geolocation.watchPosition(position => {
console.log('监视位置', position)
})
蓝牙
目前只有chrome 和部分小程序支持。挖坑,待填。
其他
写到这里我突然意识到,以前好像访问过浏览器的站点权限,至少edge和chrome可以访问位置,摄像头,麦克风,通知,VR和AR,这些也是:
挖坑待填。
REF
浏览器 Clipboard API:实现网页一键复制和一键粘贴功能