ContactsManager: Methode select()
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.
Die select()
-Methode des
ContactsManager
-Interfaces gibt ein Promise
zurück, das, wenn aufgelöst, dem Benutzer einen Kontaktpicker präsentiert, mit dem er Kontakt(e) auswählen kann, die er teilen möchte. Diese Methode erfordert eine Benutzeraktion, damit das Promise
aufgelöst wird.
Syntax
select(properties)
select(properties, options)
Parameter
properties
-
Ein Array von
Strings
, das definieren, welche Informationen von einem Kontakt abgerufen werden sollen. Zulässige Werte sind wie folgt:'name'
: Der Name des Kontakts.'tel'
: Die Telefonnummer(n) des Kontakts.'email'
: Die E-Mail-Adresse des Kontakts.'address'
: Die Postadresse des Kontakts.'icon'
: Das Avatarbild des Kontakts.
options
Optional-
Optionen sind wie folgt:
multiple
-
Ein Boolean, der erlaubt, mehrere Kontakte auszuwählen. Der Standardwert ist
false
.
Rückgabewert
Gibt ein Promise
zurück, das mit einem Array von Objekten, die Kontaktinformationen enthalten, aufgelöst wird. Jedes Objekt repräsentiert einen einzelnen Kontakt und kann die folgenden Eigenschaften enthalten:
address
-
Ein
Array
vonContactAddress
-Objekten, die jeweils spezifische Details einer einzigartigen physischen Adresse enthalten. email
-
Ein Array von Strings, das E-Mail-Adressen enthält.
icon
-
Ein Array von
Blob
-Objekten, das Bilder von Einzelpersonen enthält. name
-
Ein Array von Strings, die jeweils einen einzigartigen Namen einer Einzelperson enthalten.
tel
-
Ein Array von Strings, die jeweils eine einzigartige Telefonnummer einer Einzelperson enthalten.
Ausnahmen
InvalidStateError
DOMException
-
Wird zurückgegeben, wenn der Browsing-Kontext nicht auf oberster Ebene ist, wenn der Kontaktpicker eine Flagge zeigt, die anzeigt, dass bereits ein bestehender Kontaktpicker vorhanden ist, da immer nur ein Picker existieren kann, oder wenn das Starten eines Kontaktpickers fehlgeschlagen ist.
SecurityError
DOMException
-
Wird zurückgegeben, wenn die Methode nicht durch eine Benutzeraktivierung ausgelöst wird.
TypeError
-
Wird zurückgegeben, wenn
properties
leer ist oder wenn eine der angegebenen Eigenschaften nicht unterstützt wird.
Sicherheit
Eine transiente Aktivierung ist erforderlich. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit diese Funktion funktioniert.
Beispiele
Einfache Beispiel
Das folgende Beispiel setzt ein Array von Eigenschaften, die für jeden Kontakt abgerufen werden sollen, sowie ein Optionsobjekt, das die Auswahl mehrerer Kontakte ermöglicht.
Eine asynchrone Funktion wird dann definiert, die die select()
-Methode verwendet, um dem Benutzer ein Kontaktpicker-Interface zu präsentieren und die ausgewählten Ergebnisse zu verarbeiten. handleResults()
ist eine vom Entwickler definierte Funktion.
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.
}
}
Auswahl nur mit unterstützten Eigenschaften
Das folgende Beispiel verwendet getProperties()
, um sicherzustellen, dass nur unterstützte Eigenschaften übergeben werden. Andernfalls könnte select()
einen TypeError
werfen. handleResults()
ist eine vom Entwickler definierte Funktion.
const supportedProperties = await navigator.contacts.getProperties();
async function getContacts() {
try {
const contacts = await navigator.contacts.select(supportedProperties);
handleResults(contacts);
} catch (ex) {
// Handle any errors here.
}
}
Spezifikationen
Specification |
---|
Contact Picker API # contacts-manager-select |
Browser-Kompatibilität
BCD tables only load in the browser