Signatur
Beschreibung
Die Eigenschaft addressLine der Schnittstelle ContactAddress liefert ein schreibgeschütztes Array von Zeichenfolgen. Jeder Eintrag steht für eine Adresszeile, die in keiner der anderen, strukturierten Eigenschaften (city, postalCode, country, region usw.) enthalten ist – typischerweise Straße und Hausnummer, Hinterhaus, Stockwerk, c/o-Angaben oder Firmenzusätze.
ContactAddress-Objekte erhält man über die Contact Picker API: Ruft man navigator.contacts.select() mit der Eigenschaft 'address' auf, enthält jeder gewählte Kontakt ein Array address mit ContactAddress-Instanzen. Die Schnittstelle erbt von PaymentAddress, weshalb Aufbau und Bedeutung von addressLine identisch zur (inzwischen veralteten) Payment-Request-Adresse sind.
Die Reihenfolge der Zeilen entspricht der Reihenfolge, wie sie im Adressbuch hinterlegt ist. Anzahl und Inhalt sind länderabhängig und nicht normiert – das Array kann leer sein, eine einzige Zeile oder mehrere enthalten. Für die Anzeige verbindet man die Zeilen üblicherweise mit Zeilenumbrüchen oder Kommas.
Rückgabewert
Beispiele
Adresszeilen eines gewählten Kontakts ausgeben
const pickAddress = async () => {
if (!('contacts' in navigator)) {
console.log('Contact Picker API nicht verfügbar');
return;
}
// Muss in einem Klick-Handler (Nutzeraktion) aufgerufen werden
const [contact] = await navigator.contacts.select(['name', 'address']);
const address = contact?.address?.[0];
if (address) {
console.log(address.addressLine);
}
};
document.querySelector('#pick').addEventListener('click', pickAddress);Lieferformular automatisch befüllen
const fillShippingForm = async () => {
const supported = await navigator.contacts.getProperties();
if (!supported.includes('address')) return;
const [contact] = await navigator.contacts.select(['address']);
const addr = contact?.address?.[0];
if (!addr) return;
const [street = '', ...extra] = addr.addressLine;
document.querySelector('#street').value = street;
document.querySelector('#street2').value = extra.join(', ');
document.querySelector('#zip').value = addr.postalCode;
document.querySelector('#city').value = addr.city;
};
document.querySelector('#import').addEventListener('click', fillShippingForm);Vollständige Adresse als Etikett formatieren
const formatLabel = (addr) => [
addr.recipient,
...addr.addressLine,
`${addr.postalCode} ${addr.city}`.trim(),
addr.country
].filter(Boolean).join('\n');
// addr stammt aus navigator.contacts.select(['address'])
console.log(formatLabel({
recipient: 'Erika Mustermann',
addressLine: ['Musterstraße 12', 'c/o Beispiel GmbH'],
postalCode: '10115',
city: 'Berlin',
country: 'DE'
}));// Wichtig · Fallstricke
- Experimentell und stark eingeschränkt: Die Contact Picker API ist nur in Chrome/Edge auf Android (ab Version 80) verfügbar, nicht auf dem Desktop, nicht in Firefox und nicht in Safari (dort höchstens hinter einem Flag). Immer per
'contacts' in navigatorundnavigator.contacts.getProperties()prüfen. - Nur in einem sicheren Kontext (HTTPS), im Top-Level-Frame und als Reaktion auf eine Nutzeraktion (z. B. Klick) aufrufbar – sonst wird das Promise abgelehnt.
- Das Array ist eingefroren:
push()oder direkte Zuweisungen schlagen fehl bzw. werfen im Strict Mode einenTypeError. Zum Bearbeiten zuerst kopieren, z. B.[...addr.addressLine]. - Das Array kann leer sein; nicht davon ausgehen, dass
addressLine[0]immer die Straße enthält. Struktur und Reihenfolge hängen vom Adressbuch und vom Land ab. - Adressen sind personenbezogene Daten – nur anfordern, was wirklich benötigt wird, und Datenschutzvorgaben (DSGVO) beachten.