Contacts API 仅支持用户手动选择联系人，不支持自动读取全部联系人；需 HTTPS、用户手势触发，且仅 Chrome for Android 有限支持，iOS 和桌面端基本不可用。
目前浏览器原生的 contacts api 无法直接获取联系人信息，它仅支持“选择联系人”（即用户主动从设备通讯录中挑选并授权分享），且仅在部分平台（如 android + chrome）有限支持，ios 和桌面端基本不可用。
Contacts API 的真实能力与限制
该 API 并非“读取全部联系人”，而是提供一个受控的选择界面：
- 调用
navigator.contacts.select()会弹出系统级联系人选择器（类似文件选择框） - 用户必须手动勾选一个或多个联系人，点击确认后才返回所选字段（如 name、email、tel 等）
- 需要 HTTPS 环境 + 用户手势触发（如点击按钮），不能自动运行
- Chrome for Android 支持较完整；Chrome Desktop、Safari、Firefox 均不支持或已移除
基础使用示例（需 Chrome Android 测试）
以下代码仅在兼容环境下有效，且必须由用户点击触发：
async function pickContacts() {
try {
const props = ['name', 'email', 'tel'];
const contacts = await navigator.contacts.select(props, { multiple: true });
console.log('选中的联系人：', contacts);
} catch (err) {
console.error('获取失败：', err.name); // 如 'NotAllowedError' 或 'NotSupportedError'
}
}
注意：props 列表只能是标准字段（name、email、tel、address、icon），不能请求任意字段或全量数据。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
替代方案建议
若需更可靠的联系人访问能力，应考虑以下路径：
立即学习“Java免费学习笔记（深入）”；
- 移动端 App 封装：用 Capacitor 或 Cordova 调用原生通讯录 API（Android/iOS 均支持）
- Web 表单手动输入：引导用户复制粘贴或逐项填写，兼顾所有浏览器
- OAuth 授权集成：对接 Google Contacts API 或 Outlook Contacts API（需后端代理处理 token）
-
渐进式降级：先检测
navigator.contacts是否存在，存在再启用选择功能，否则回退到表单
安全与权限要点
浏览器严格限制通讯录访问，这是隐私保护设计：
- 每次调用都需用户显式授权，无“记住选择”机制
- 返回的数据仅限用户勾选的字段，不会泄露未选项目（如地址簿里有 500 条，只选 2 条就只返回这 2 条）
- 页面卸载或刷新后权限即失效，下次仍需重新触发选择流程
