Chrome86新特性解读
时间：2023-03-11 21:27:48
科技观察
文件系统可以稳定使用之前我们可以使用元素从磁盘读取文件。如果我们想保存更改，我们需要在标签中添加一个下载属性。它会打开文件选择器，然后保存文件，但是我们没有办法写回刚刚保存的文件，这个过程复杂而繁琐。现在，使用文件系统访问API，您可以调用showOpenFilePicker()，这将显示一个文件选择器，然后返回一个文件选择器，您可以使用它来读取文件。asyncfunctiongetFileHandle(){constopts={types:[{description:'TextFiles',accept:{'text/plain':['.txt','.text'],'text/html':['.html','.htm']}}]};returnawaitwindow.showOpenFilePicker(opts);}如果要将文件保存到磁盘，可以使用之前得到的picker，也可以调用showSaveFilePicker()得到一个新的picker：asyncfunctionsaveFile(fileHandle){if(!fileHandle){fileHandle=awaitwindow.showSaveFilePicker();}constwritable=awaitfileHandle.createWritable();awaitwritable.write(contents);awaitwritable.close();}在写入之前，Chrome检查是否userhasgrantedwrite如果未授予写权限，Chrome将首先提示用户。调用showDirectoryPicker()将打开一个目录，您可以在其中获取文件列表或在该目录中创建新文件。这对于与大量文件交互的IDE或媒体播放器之类的东西非常有用。当然，用户必须授予写权限才能写任何东西。尝试一下：WebHID人机接口设备（Humaninterfacedevices），通常称为HID，从人类那里获取输入或向人类提供输出。现在我们可以通过一些JavaScriptAPI访问这些设备，并且在WebHIDAPI的帮助下我们可以充分利用游戏手柄，包括所有按钮、操纵杆、传感器、触发器、LED等。但是OpenHID.addEventListener('click',async(e)=>{constdeviceFilter={vendorId:0x0fd9};constopts={filters:[deviceFilter]};constdevices=awaitnavigator.hid.requestDevice(opts);myDevice=devices[0];awaitmyDevice.open();myDevice。addEventListener('inputreport',handleInpRpt);});基于Web的视频聊天应用程序，使用专用扬声器中的电话按钮开始或结束通话、静音等。当然，像这样强大的API只能在用户许可的情况下使用。试用：多屏放置API现在，我们可以使用window.screen()来获取一些屏幕属性：constscreen=window.screen;console.log(screen);//{//availHeight:1612,//availLeft:0,//availTop:23,//availWidth:3008,//colorDepth:24,//orientation:{...},//pixelDepth:24,//width:3008//}但是如果你有多台显示器怎么办去做？抱歉，它只告诉您当前屏幕的属性。Multi-ScreenWindowPlacementAPI已在Chrome86测试，可枚举当前电脑连接的所有屏幕，支持在指定窗口放置屏幕。在使用之前，需要向用户申请许可。asyncfunctiongetPermission(){constopt={name:'window-placement'};try{constperm=awaitnavigator.permissions.query(opt);returnperm.state==='granted';}catch{returnfalse;}}用户授权后permission，调用window.getScreens()将返回一个使用Screen对象数组解析的承诺。constscreens=awaitwindow.getScreens();console.log(screens);//[//{id:0,internal:false,primary:true,left:0,...},//{id:1,internal:true,primary:false,left:3008,...},//]
