CODEWITHSUNDEEP
windows-8navigationwinjsappbar
Doc Rinehart
Doc Rinehart

Reputation: 83

Win8 JS App: How can one prevent backward navigation? Can't set WinJS.Navigation.canGoBack

Fairly new to developing for Windows 8, I'm working on an app that has a rather flat model. I have looked and looked, but can't seem to find a clear answer on how to set a WinJS page to prevent backward navigation. I have tried digging into the API, but it doesn't say anything on the matter.

The code I'm attempting to use is 

WinJS.Navigation.canGoBack = false;

No luck, it keeps complaining about the property being read only, however, there are no setter methods to change it.

Thanks ahead of time, ~Sean

Upvotes: 2

Views: 2076

Answers (3)

Cœur
Cœur

Reputation: 38667

You can't change canGoBack, but you can disable the button to hide it and free the history stack.

    // disabling and hiding backbutton
    document.querySelector(".win-backbutton").disabled = true;
    // freeing navigation stack
    WinJS.Navigation.history.backStack = [];

This will prevent going backward and still allow going forward.

Upvotes: 3

Doc Rinehart
Doc Rinehart

Reputation: 83

So lots of searching and attempting different methods of disabling the Back Button, finally found a decent solution. It has been adapted from another stackoverflow question.

Original algorithm: How to Get Element By Class in JavaScript?

MY SOLUTION

At the beginning of a fragment page, right as the page definition starts declaring the ready: function, I used an adapted version of the above algorithm and used the resulting element selection to set the disabled attribute.

        // Retrieve Generated Back Button
        var elems = document.getElementsByTagName('*'), i;

        for (i in elems)
        {
            if((" "+elems[i].className+" ").indexOf("win-backbutton") > -1)
            {
                var d = elems[i];
            }
        }

        // Disable the back button
        d.setAttribute("disabled", "disabled");

The code gets all elements from the page's DOM and filters it for the generated back button. When the proper element is found, it is assigned to a variable and from there we can set the disabled property.

I couldn't find a lot of documentation on working around the default navigation in a WinJS Navigation app, so here are some methods that failed (for reference purposes):

  • Getting the element by class and setting | May have failed from doing it wrong, as I have little experience with HTML and javascript.

  • Using the above method, but setting the attribute within the for loop breaks the app and causes it to freeze for unknown reasons.

  • Setting the attribute in the default.js before the navigation is finished. | The javascript calls would fail to recognize either methods called or DOM elements, presumably due to initialization state of the page.

There were a few others, but I think there must be a better way to go about retrieving the element after a page loads. If anyone can enlighten me, I would be most grateful. ~Sean R.

Upvotes: 0

Jim O'Neil
Jim O'Neil

Reputation: 23764

canGoBack does only have a getter (defined in base.js), and it reflects the absence or presence of the backstack; namely nav.history.backstack.

The appearance of the button itself is controlled by the disabled attribute on the associated button DOM object, which in turn is part of a CSS selector controlling visibility. So if you do tinker with the display of the Back button yourself be aware that the navigation plumbing is doing the same.

Setting the backstack explicitly is possible; there's a sample the Navigation and Navigation History Sample that includes restoring a history as well as preventing navigation using beforenavigate, with the following code:

    // in ready
    WinJS.Navigation.addEventListener("beforenavigate", this.beforenavigate);


    //
    beforenavigate: function (eventObject) {
        // This function gives you a chance to veto navigation. This demonstrates that capability
        if (this.shouldPreventNavigation) {
            WinJS.log && WinJS.log("Navigation to " + eventObject.detail.location + " was prevented", "sample", "status");
            eventObject.preventDefault();
        }
    },

Upvotes: 7

Related Questions