Anleitung: App-Leisten-Elemente abrufen und festlegen

Veröffentlicht am 4. Oktober 2025 von Jan Bunk


Für manche Websites kann es sinnvoll sein, die Buttons in der App-Leiste der App dynamisch zu ändern. Das kannst du mit diesen JavaScript-Funktionen erreichen.

Verwendung der JavaScript-Funktionen

Schau dir gerne auch die executeWhenAppReady() Funktion von unser App-Helfer-Skript. Es stellt sicher, dass deine Website nicht versucht, mit der App zu interagieren, bevor sie bereit ist oder wenn deine Website mit einem normalen Browser geladen wird (ReferenceError, Funktion ist nicht definiert).

getAppBarItems

Mit dieser Funktion bekommst du eine Liste von Objekten, die alle aktuell angezeigten App-Bar-Elemente repräsentieren.


<script>
    try {
        // returns a list of objects representing the app bar items
        let appBarItems = (await getAppBarItems())["appBarItems"];
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

setAppBarItems

Mit dieser Funktion kannst du die App-Bar-Elemente ändern, die angezeigt werden sollen.


<script>
    try {
        // example for an app bar item object
        let newAppBarItem = {
            action: {
                urlToRedirectTo: "https://webtoapp.design/contact",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false,
                isRateAction: false,
                isPastNotificationsAction: false,
            },
            icon: {
                name: "list"
            }
        };

        // get the currently displayed app bar items
        let allAppBarItems = (await getAppBarItems())["appBarItems"];

        // add the new app bar item to the list of app bar items
        allAppBarItems.push(newAppBarItem);

        // display the list of app bar items, including the new app bar item
        await setAppBarItems(allAppBarItems);
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        console.log(e);
    }
</script>
    

Ändern des App-Menüs

Hier ist eine Liste der zugehörigen Entwicklerdokumentationen über das dynamische Ändern des App-Menüs. Stelle sicher, dass du diejenige ansiehst, die für das Layout deiner App zutrifft.