聯絡人選擇器 API
Contact Picker API 允許使用者從他們的聯絡人列表中選擇條目，並將選定條目的有限詳細資訊共享給網站或應用程式。
注意： 此 API 在 Web Workers 中不可用（未透過 WorkerNavigator 暴露）。
Contact Picker API 的概念和用法
長期以來，訪問聯絡人一直是原生應用程式中的一項功能。Contacts Picker API 將此功能引入了 Web 應用程式。
用例包括選擇聯絡人，透過電子郵件或聊天應用程式傳送訊息；選擇聯絡人的電話號碼用於 IP 語音 (VOIP)；或者發現已經加入社交平臺的聯絡人。使用者代理還可以提供與使用者裝置上的其他應用程式一致的體驗。
呼叫 select 方法時，系統會向用戶顯示一個聯絡人選擇器，他們可以透過該選擇器選擇要與 Web 應用程式共享的聯絡人資訊。在授予顯示聯絡人選擇器的許可權之前，需要使用者進行互動，並且對聯絡人的訪問不是持久的；使用者必須在應用程式每次發出請求時授予訪問許可權。
此 API 僅從安全的頂級瀏覽上下文中可用，並且非常謹慎地考慮聯絡人資料的敏感性和隱私。使用者有責任選擇要共享的資料，並且只允許共享選定聯絡人的特定資料，而不能訪問其他聯絡人的任何資料。
介面
ContactAddress-
表示一個物理地址。
ContactsManager-
為使用者提供了一種選擇和共享聯絡人有限詳細資訊給 Web 應用程式的方式。
-
返回一個
ContactsManager物件例項，可以從該例項訪問所有其他功能。
示例
特性檢測
以下程式碼檢查 Contact Picker API 是否受支援。
const supported = "contacts" in navigator;
檢查支援的屬性
以下非同步函式使用 getProperties() 方法來檢查支援的屬性。
async function checkProperties() {
const supportedProperties = await navigator.contacts.getProperties();
if (supportedProperties.includes("name")) {
// run code for name support
}
if (supportedProperties.includes("email")) {
// run code for email support
}
if (supportedProperties.includes("tel")) {
// run code for telephone number support
}
if (supportedProperties.includes("address")) {
// run code for address support
}
if (supportedProperties.includes("icon")) {
// run code for avatar support
}
}
選擇聯絡人
以下示例設定了要為每個聯絡人檢索的屬性陣列，並設定了一個選項物件以允許選擇多個聯絡人。
然後定義一個非同步函式，該函式使用 select() 方法向用戶顯示聯絡人選擇器介面並處理所選結果。
const props = ["name", "email", "tel", "address", "icon"];
const opts = { multiple: true };
async function getContacts() {
try {
const contacts = await navigator.contacts.select(props, opts);
handleResults(contacts);
} catch (ex) {
// Handle any errors here.
}
}
handleResults() 是一個由開發者定義的函式。
規範
| 規範 |
|---|
| 聯絡人選擇器 API # contacts-manager |
瀏覽器相容性
載入中…