Contact Picker API 测试 - 选取系统通讯录联系人
在支持的浏览器上弹出通讯录选择器,获取姓名、电话、邮箱等信息,体验联系人API。
UD5工具箱
基于 Contacts API(Contact Picker API)从设备通讯录中选择联系人
点击左侧 "选择联系人" 按钮开始
或在桌面端点击 "模拟演示" 查看数据格式
navigator.contacts.select() 方法调用。
navigator.contacts 是否存在。该API在移动端PWA场景下最为实用。部分浏览器可能需要用户在 chrome://flags 中启用相关实验性功能。
['name', 'email', 'tel']。
if ('contacts' in navigator)name → 数组,元素含 displayName, givenName[], familyName[]email → 数组,元素含 address(邮箱字符串), type(如"personal","work")tel → 数组,元素含 number(电话号码), type(如"mobile","home")address → 数组,元素含 formattedAddress, type 等icon → 数组,元素为Blob对象(可转为blob URL用于展示)navigator.contacts.select() 是 Contact Picker API,它只支持选择联系人。还有一个更早的提案叫做 Web Contact API,它计划支持完整的CRUD操作(创建、读取、更新、删除联系人),但这个完整版本尚未被任何浏览器实现。目前可用的只有"选取器"功能——即从设备通讯录中选取并读取联系人信息。
在支持的浏览器上弹出通讯录选择器,获取姓名、电话、邮箱等信息,体验联系人API。
使用Web NFC API读取NDEF格式标签的数据,展示记录类型和内容(需硬件支持)。
测试浏览器通知权限和弹出,自定义标题、正文及图标,发送系统桌面通知,调试推送。
说出特定指令来操控虚拟卡牌出牌或触发效果,体验语音交互娱乐。
构造文本、URL、MIME 等 NDEF 记录并写入 NFC 标签,同时可读取解析标签内容,适合现场调试。
录入在会议、活动结识的联系人信息,设置定期联络提醒,维护关系。
设计无网络连接时显示的页面样式,生成需缓存的HTML。
选择 DOM 元素,列出通过 addEventListener 绑定的所有事件及其类型和监听器(可用时)。
上传 JSON 格式题库,随机抽取指定数量题目生成在线测验,自动评分和解析。
生成一个测试音频播放器,展示如何用MediaSession API设置元数据和操作回调。
上传名片图片,前端模拟解析姓名、电话、公司字段,演示视觉识别流程(模拟数据)。
可视化展示发布/订阅模式的运作,添加订阅者和发布者,查看事件流。
显示一段缺少句读的英文,在正确的语法位置点击添加逗号并验证。
输入字母或数字,显示对应的国际旗语手势图案,可用于学习或密码。
配置Launch Handler使PWA应用在重复点击时聚焦到已开窗口,而不是新建窗口。
粘贴SSH公钥,生成对应的OpenSSH randomart视觉指纹图和指纹字符串。
利用Web Speech API将语音实时转换为文字,支持多语言识别,输出结果可复制编辑。
生成由随机单词组成的口令短语,或自定义字符集强密码,实时显示强度。
上传或粘贴证书签名请求(CSR)或公开证书内容,提取CN, SAN, 有效期等。
生成RSA/EC对称密钥的JWK表示,支持复制导出,用于OAuth2/JWT的密钥配置。
显示当前AudioContext的状态、采样率和输出延迟,并允许一键挂起或恢复。
输入文本,以动画小人挥舞旗帜演示国际旗语及莫尔斯旗语样式。
添加拥有的电子游戏或桌游,标记通关/游玩进度与评分。
输入技能和行业,自动生成几种风格的LinkedIn个人介绍标题。
从内置题库中随机组合个性化安全问题,用于账户恢复或身份验证设置。
逐步骤模拟SMTP握手:EHLO、MAIL FROM、RCPT TO、DATA,查看服务器响应。
使用Idle Detection API区分用户是临时空闲、键盘无活动还是屏幕已锁定。
生成带有焦点陷阱、ESC 关闭和背景遮罩的无障碍模态弹窗代码。
勾选Secure、HttpOnly、SameSite等属性,生成安全的Set-Cookie字符串,增强Web应用安全。
演示请求订阅Web Push,获得端点后可配合服务端发送测试推送。