网页里有很多原生接口能实现、但用起来特别别扭的小功能。复制一段文字到剪贴板、把页面切成全屏、判断当前是不是全屏状态，看起来都是一行代码的事，真动手就发现全是坑。不同浏览器对剪贴板接口的支持不一样，用到过期的旧接口还会静默失败，用户点了复制却什么都没发生，还以为是自己没点对。全屏也一样，各家浏览器的前缀和事件名字都不统一。这次整理了 3 款开源免费、可商用的浏览器操作小工具库。
三款库分别做什么
Clipboard.js 是用得最广的复制库，给一个按钮加上数据属性就能复制指定内容，不用手写事件，支持从输入框和元素内容取值，也能用代码调用复制任意文本，内置了对老浏览器的降级和成功失败回调，可以给用户一个已复制的提示。copy-to-clipboard 更极简，只有一个函数，传要复制的文字进去，返回是否成功，体积只有几 KB，适合在已有框架代码里随手调用。Screenfull.js 把浏览器的全屏接口统一封装了，一键进出全屏，也能分开调用进入和退出，还能监听全屏状态变化，做视频播放、演示、看图这类需要沉浸体验的页面很实用。
这类小功能为什么别自己写
因为它们看着简单，实际全是兼容性和时序的细节。剪贴板接口这几年换过好几轮，新接口在页面不是焦点的时候会直接失败，旧接口又在新浏览器里被废弃，自己写的代码往往只在开发者自己的浏览器里好使，到了用户那里就有一半人失败。全屏更麻烦，标准接口、带前缀的接口、还有各家的全屏事件名，一路判断下来代码又长又难维护。这些差异是现成的库已经踩过一遍的坑，直接拿来用，把精力留给真正有差异化的功能更划算。
用的时候容易踩的坑
一是剪贴板必须在用户点击的事件里调用，放到异步回调最末尾去调，很可能被浏览器拦下来，表现为复制没反应。二是全屏同理，必须由用户操作触发，不能在页面加载完自动全屏，那是被明确限制的。三是读取剪贴板内容涉及权限，浏览器会弹授权，用户拒绝之后要有兜底提示，不能直接报错。四是复制成功与否要看回调结果，别假设一定成功，给个小小的提示文案，用户才知道操作生效了。
包内容和用法
压缩包里按库名分成了三个目录，每个目录里放了压缩版和未压缩版两种文件，正式项目引压缩版。三款库互相独立、不依赖任何框架，用 script 标签引入就能拿到全局对象，也支持模块化引入。选型上，给按钮做复制用 Clipboard.js 最省事，只在代码里调一下用 copy-to-clipboard，需要全屏能力用 Screenfull.js。三款加起来不到一百 K，按需引入基本不占体积，每个目录都附带了说明文档和许可文件。
这类工具库的特点是平时不起眼，用上了就很顺手，属于开发时随手就能加分的零件。做一个后台、一个素材站、一个视频页，把复制和全屏这些细节处理干净，用户不会特意夸，但那种顺滑感是能被感知到的。建议做法是先把团队里反复出现的小需求列出来，用现成的库一次性解决，别每个项目都重新写一遍。这三款全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容