index.html如何调用手机系统的通讯录？-html教程-PHP中文网

html页面无法直接访问手机通讯录，因浏览器沙箱机制禁止前端静态页调用原生api；navigator.contacts仅在https+pwa+用户授权下部分支持（chrome/edge），ios safari完全不支持。

index.html如何调用手机系统的通讯录？

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，不是静默失败

示例调用：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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 文件做到这事。能走通的路径，一定绕不开原生容器或用户主动操作。