HTML页面无法直接访问手机通讯录，因浏览器沙箱机制禁止前端静态页调用原生API；navigator.contacts仅在HTTPS+PWA+用户授权下部分支持（Chrome/Edge），iOS Safari完全不支持。
HTML 页面无法直接访问手机通讯录
现代浏览器出于安全和隐私考虑，index.html 作为纯前端静态页面，**没有权限调用原生系统通讯录 API**。这不是权限没开、代码写错或兼容性问题，而是浏览器沙箱机制的硬性限制——navigator.contacts 等接口仅在特定条件（如 HTTPS + 安装为 PWA + 用户明确授权）下可用，且目前仅 Chromium 内核（Chrome/Edge）部分支持，iOS Safari 完全不支持。
navigator.contacts 的实际使用门槛很高
即使你用的是 Chrome for Android，要触发通讯录选择也得满足一连串前提：
- 页面必须通过
https://协议加载（http://localhost在某些版本中可临时例外，但上线必挂） - 用户必须已将网站“添加到主屏幕”并以 PWA 模式启动（单纯在浏览器里打开无效）
- 需显式调用
navigator.contacts.select()，且只支持多选联系人字段（如['name', 'tel']），不能读取全部联系人列表 - 返回的是一个
Promise，用户拒绝授权时会抛出NotAllowedError，不是静默失败
示例调用：
if ('contacts' in navigator) {
try {
const contacts = await navigator.contacts.select(['name', 'tel'], { multiple: true });
console.log(contacts); // [{ name: ['张三'], tel: ['138…'] }]
} catch (err) {
console.error(err.name); // 可能是 'NotAllowedError' 或 'SecurityError'
}
} else {
console.log('Contacts API not supported');
}
更现实的替代方案：唤起系统通讯录 App
如果目标只是“让用户快速选一个联系人填入表单”，绕过浏览器限制的通用做法是用 URL Scheme 或 Intent 唤起原生通讯录界面，再靠用户手动复制粘贴。但要注意：
立即学习“前端免费学习笔记（深入）”；
- Android 可用
intent://contacts#Intent;scheme=content;package=com.android.contacts;end，但成功率低、包名可能因厂商定制而失效 - iOS 完全不支持任何 scheme 唤起通讯录（
tel:只能拨号，mailto:只能发邮件） - 最稳的方式其实是引导用户长按输入框 → 粘贴 → 从系统剪贴板粘贴已复制的号码（比如他们刚在通讯录里点过“复制号码”）
真正能稳定读取通讯录的场景只有一种
只有当你把网页打包成原生 App（比如用 Capacitor、Cordova 或 React Native），才能通过插件调用系统 API：
- Capacitor 的
@capacitor-community/contacts插件，在 Android/iOS 上均可请求READ_CONTACTS权限后获取完整联系人列表 - 需要在原生层配置权限声明（
AndroidManifest.xml加权限，Info.plist加NSContactsUsageDescription） - Web 端调用方式变成
Contacts.getContacts()，但底层走的是桥接，不是浏览器原生能力
别指望一个裸 index.html 文件做到这事。能走通的路径，一定绕不开原生容器或用户主动操作。
