使用浏览器访问终端的剪贴板和位置信息

关于浏览器的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：实现网页一键复制和一键粘贴功能

Clipboard - Web API 接口参考 | MDN

使用地理位置定位 - Web API 接口参考 | MDN