Chrome 86新功能解读

开发 前端
现在,使用文件系统访问 API,你可以调用 showOpenFilePicker(),会显示一个文件选择器,然后返回一个文件 picker,你可以用这个 picker 读取文件。

 文件系统可稳定使用

在之前,我们可以使用 <input type="file"> 元素去磁盘读取文件,如果要保存更改,需要给<a>标签增加一个download属性,它会打开文件选择器,然后保存文件,但是我们没有办法写回刚刚保存的那个文件,这个流程复杂又繁琐。

现在,使用文件系统访问 API,你可以调用 showOpenFilePicker(),会显示一个文件选择器,然后返回一个文件 picker,你可以用这个 picker 读取文件。 

  1. async function getFileHandle() {  
  2.   const opts = {  
  3.     types: [  
  4.       {  
  5.         description: 'Text Files',  
  6.         accept: {  
  7.           'text/plain': ['.txt', '.text'],  
  8.           'text/html': ['.html', '.htm']  
  9.         }  
  10.       }  
  11.     ]  
  12.   };  
  13.   return await window.showOpenFilePicker(opts);  

如果要将文件保存到磁盘,你可以使用之前获得的 picker ,也可以调用 showSaveFilePicker() 获得一个新的 picker: 

  1. async function saveFile(fileHandle) {  
  2.   if (!fileHandle) {  
  3.     fileHandle = await window.showSaveFilePicker();  
  4.   }  
  5.   const writable = await fileHandle.createWritable();  
  6.   await writable.write(contents);  
  7.   await writable.close();  

写入之前, Chrome 会检查用户是否已授予写入权限,如果未授予写入权限,则 Chrome 会首先提示用户。

调用 showDirectoryPicker() 将打开一个目录,你可以获取文件列表或在该目录中创建新文件。这非常适合诸如IDE或与大量文件交互的媒体播放器之类的东西。当然,在你写入内容之前,用户必须授予写入权限。

试用:WebHID

人机接口设备(Human interface devices)通常被称为 HID,它们从人那里获取输入或者向人提供输出。

现在我们可以通过一些 JavaScript API 来访问这些设备,借助 WebHID API 我们可以充分利用游戏手柄,包括所有按钮,操纵杆,传感器,触发器,LED等。 

  1. butOpenHID.addEventListener('click', async (e) => {  
  2.   const deviceFilter = { vendorId: 0x0fd9 };  
  3.   const opts = { filters: [deviceFilter] };  
  4.   const devices = await navigator.hid.requestDevice(opts);  
  5.   myDevice = devices[0];  
  6.   await myDevice.open();  
  7.   myDevice.addEventListener('inputreport', handleInpRpt);  
  8. }); 

基于网络的视频聊天应用,可以使用专用扬声器中的电话按钮来开始或结束通话、静音等。

当然,像这样强大的 API,只能在用户允许的前提下使用。

试用:多屏放置 API

现在,我们可以用 window.screen() 来获取一些屏幕的属性: 

  1. const screen = window.screen;  
  2. console.log(screen);  
  3. // {  
  4. //   availHeight: 1612,  
  5. //   availLeft: 0,  
  6. //   availTop: 23,  
  7. //   availWidth: 3008,  
  8. //   colorDepth: 24,  
  9. //   orientation: {...},  
  10. //   pixelDepth: 24,  
  11. //   width: 3008  
  12. // } 

[[348086]]

但是如果你有多个显示器怎么办?抱歉,它只会告诉你当前屏幕的属性。

Multi-Screen Window Placement API 在 Chrome 86 版本开始试用,它可以枚举所有当前计算机连接的屏幕,并且支持在指定窗口放置屏幕。在使用之前,要向用户申请权限。 

  1. async function getPermission() {  
  2.   const opt = { name: 'window-placement' };  
  3.   try {  
  4.     const perm = await navigator.permissions.query(opt); 
  5.     return perm.state === 'granted';  
  6.   } catch {  
  7.     return false;  
  8.   }  

用户授予权限后,调用 window.getScreens() 将返回一个使用 Screen 对象数组解析的 promise 。 

  1. const screens = await window.getScreens();  
  2. console.log(screens);  
  3. // [  
  4. //   {id: 0, internal: false, primary: true, left: 0, ...},  
  5. //   {id: 1, internal: true, primary: false, left: 3008, ...},  
  6. // ]  

 

责任编辑:庞桂玉 来源: 前端大全
相关推荐

2015-08-13 10:31:18

Java 9新功能

2009-09-17 09:39:28

Chrome 3.0谷歌浏览器

2011-02-24 11:10:40

2009-06-12 08:35:43

微软Windows 7操作系统

2012-03-26 10:14:25

JavaJava 8

2010-04-06 09:47:38

2013-07-17 13:48:56

Chrome 29浏览器

2021-07-13 10:41:26

Quick Audie阿里云

2021-06-15 14:47:06

GoogleChrome标签组

2017-02-06 15:50:21

谷歌Chrome小程序

2021-01-11 17:50:00

Chrome 88Chrome浏览器

2010-03-30 09:42:05

Office 2010新功能

2021-04-15 05:52:06

谷歌Chrome 浏览器

2009-11-06 17:12:46

MacChromeDev分支

2010-10-28 16:31:10

2013-11-12 17:38:49

飞康CDPNSS

2020-06-28 08:21:07

Chrome浏览器Chrome浏览器

2009-05-22 08:56:02

GoogleChrome浏览器

2019-11-18 09:20:36

chromebookChrome应用Chrome

2011-11-09 09:26:55

虚拟化云计算vSphere 5.0
点赞
收藏

51CTO技术栈公众号