Postat den 4. oktober 2025 av Jan Bunk
För vissa webbplatser kan det vara användbart att dynamiskt ändra knapparna i appens appbar. Du kan göra detta med dessa JavaScript-funktioner.
executeWhenAppReady()-funktionen i vårt hjälparskript för appen. Det säkerställer att din webbplats inte försöker interagera med appen innan den är redo eller när din webbplats laddas med en vanlig webbläsare (ReferenceError, funktionen är inte definierad). getAppBarItemsAnvänd den här funktionen för att få en lista med objekt som representerar alla appbar-objekt som för närvarande visas.
<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>
setAppBarItemsAnvänd den här funktionen för att ändra vilka appbar-objekt som ska visas.
<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>
Här är en lista över relaterad utvecklardokumentation om att dynamiskt ändra appens meny. Se till att du tittar på den som gäller för din apps layout.