ContactsManager

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das ContactsManager-Interface der Contact Picker API ermöglicht es Benutzern, Einträge aus ihrer Kontaktliste auszuwählen und eingeschränkte Details der ausgewählten Einträge mit einer Website oder Anwendung zu teilen.

Der ContactsManager ist über die globale Eigenschaft navigator.contacts verfügbar.

Instanzmethoden

select() Experimentell

Gibt ein Promise zurück, das, wenn es aufgelöst wird, dem Benutzer einen Kontaktpicker präsentiert, mit dem Kontakte ausgewählt werden können, die sie teilen möchten.

getProperties() Experimentell

Gibt ein Promise zurück, das mit einem Array von strings aufgelöst wird, die angeben, welche Kontakteigenschaften verfügbar sind.

Beispiele

Feature-Erkennung

Der folgende Code überprüft, ob die Contact Picker API unterstützt wird.

js
const supported = "contacts" in navigator && "ContactsManager" in window;

Überprüfen der unterstützten Eigenschaften

Die folgende asynchrone Funktion verwendet die Methode getProperties, um die unterstützten Eigenschaften zu überprüfen.

js
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
  }
}

Auswählen von Kontakten

Das folgende Beispiel legt ein Array von Eigenschaften fest, die für jeden Kontakt abgerufen werden sollen, sowie ein Optionsobjekt, um die Auswahl mehrerer Kontakte zu ermöglichen.

Eine asynchrone Funktion wird dann definiert, die die Methode select() verwendet, um dem Benutzer eine Kontaktpicker-Oberfläche zu präsentieren und die gewählten Ergebnisse zu verarbeiten.

js
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() ist eine vom Entwickler definierte Funktion.

Spezifikationen

Specification
Contact Picker API
# contacts-manager

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ContactsManager
Experimental
getProperties
Experimental
select
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.

Siehe auch