Så här gör du: Hur man hämtar och ställer in appens menyalternativ

För vissa webbplatser kan det vara användbart att dynamiskt ändra apparnas menyalternativ. Det kan du göra med dessa JavaScript-funktioner.

Använda JavaScript-funktioner

getMenuItems

Använd den här funktionen för att hämta en lista med objekt som representerar alla menyalternativ som för närvarande visas.

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

setMenuItems

Använd den här funktionen för att ändra de menyalternativ som ska visas.

<script>
    try {
        // example for a menu item object
        let newMenuItem = {
            name: "Contact",
            action: {
                urlToRedirectTo: "https://webtoapp.design/contact",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: null,
            children: []
        };

        // get the currently displayed menu items
        let allMenuItems = (await getMenuItems())["menuItems"];

        // add the new menu item to the list of menu items
        allMenuItems.push(newMenuItem);

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

convertElementToMenuItem

Detta är en hjälpfunktion för att hämta ett objekt för ett menyalternativ som motsvarar att klicka på ett visst element, vanligtvis en länk eller en knapp.

<a href="https://webtoapp.design/" id="my-link">My Link</a>

<script>
    let myLinkElement = document.getElementById("my-link");

    let myMenuItem = convertElementToMenuItem(myLinkElement);
    /*
        The result will look something like this:
        {
            name: "My Link",
            action: {
                urlToRedirectTo: null,
                javascriptToExecute: null,
                elementToClickSelector: "#my-link",
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: null,
            children: []
        };

        or (depending on the app configuration)

        {
            name: "My Link",
            action: {
                urlToRedirectTo: "https://webtoapp.design/",
                javascriptToExecute: null,
                elementToClickSelector: null,
                isFavoriteAction: false,
                isShareAction: false,
                isOpenExternallyAction: false,
                isSettingsAction: false
            },
            icon: null,
            children: []
        };
    */
</script>