How to navigate back to default.html?

Question

I know how to navigate to another html like page1.html or page2.html, and use "WinJS.Navigation.back()" or "forward()" to navigate between pages.

But I can't navigate back to default.html. Also I use "WinJS.Navigation.location" to see what is the location for  default.html, it shows "".

How do I navigate back to default.html?

Thanks.

Answer 1

You need to provide some repro steps so that we can help.  There is not enough information to tell where your problem may lay.

---

Jeff Sanders (MSFT)

Answer 2

If you're using page controls (WinJS.UI.Pages), as is done through most of the templates, then default.html is typically just a container in which other pages are loaded, and not a page with its own content to which you'd navigate. That is, the app actually stays on default.html and the other "pages" are not navigated to in the document.location sense, but loaded dynamically into the DOM of default.html.

Navigating back to the "home" state of your app, then, means using WinJS.Navigation.navigate to whatever page control is specified as the home page in default.html. For example, if you look at default.html in the Grid App project template, you see that pages/groupedItems/groupedItems.html is the home page:

<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/groupedItems/groupedItems.html'}"></div>

Thus navigating to this page essentially goes to the home page of the app, and you don't need to think about default.html as a page of its own.

.Kraig

Answer 3

The code below navigate the app to /html/1_NavigationState.html .

WinJS.Navigation.navigate("/html/1_NavigationState.html");
WinJS.Navigation.addEventListener("navigated", function (eventObject)
{
    var url = eventObject.detail.location;
    var host = document.getElementById("contentHost");
    host.winControl && host.winControl.unload && host.winControl.unload();
    WinJS.Utilities.empty(host);
    eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
    WinJS.Application.sessionState.lastUrl = url;
    }));
});

And in 1_NAvigationState.js I have a code below , and navigate to 2_NavigationEvents.html.

WinJS.Navigation.navigate("/html/2_NavigationEvents.html");

If I navigate to "/default.html", and it has runtime error. 

If I fix the runtime error, it shows a totally blank page.

What might be Wrong?

Thanks

Answer 4

Thanks for your explanation. I understand more about the ways to navigation.

But I just wonder what is the problem for my code.

Thanks anyway.

Answer 5

Hi Daniel,

RE: "what is the problem for my code"  - You need to provide a simple repro and steps in order for us to assist you.  There is not enough information to proceed.  If Kraig's explanation is not representitive of your application, we have no idea what your code is. 

-Jeff

---

Jeff Sanders (MSFT)

Answer 6

Your app is clearly using page controls, which likely means default.html is merely a container shell and not a "page" in itself to which you navigate. Default.html/default.js likely lacks the page control structure, hence the runtime error.

Please show the details of the runtime error, your default.html, and your default.js, otherwise we cannot really answer your question.

Answer 7

In default.js

WinJS.Navigation.addEventListener("navigated", function (eventObject){
    var url = eventObject.detail.location;
    var host = document.getElementById("contentHost");
    // Call unload method on current scenario, if there is one
    host.winControl && host.winControl.unload && host.winControl.unload();
    WinJS.Utilities.empty(host);
        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
        WinJS.Application.sessionState.lastUrl = url;
    }));
});

function navigateClickHandler(eventInfo){
     WinJS.Navigation.navigate("/html/1_NavigationState.html");
}

In 1_NavigationState.js

WinJS.Navigation.addEventListener("navigated", function (eventObject) {
    var url = eventObject.detail.location;
    var host = document.getElementById("contentHost");
    // Call unload method on current scenario, if there is one
    host.winControl && host.winControl.unload && host.winControl.unload();
    WinJS.Utilities.empty(host);
        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
        WinJS.Application.sessionState.lastUrl = url;
    }));
});

function navigateClickHandler (eventInfo) {
    WinJS.Navigation.navigate("/default.html");
}

In the default.html and 1_NavigationState.html , they have a <div id="contenthost />

When I navigate from 1_NavigationState.html  to default.html , it shows a blank page.

Answer 8

It looks like you're using the structure of one of the SDK samples, in which case "Scenario 1" is always the home page of the app; default.html is again just a container that has no content of its own.

Thus WinJS.Navigation.navigate("/html/1_NavigationState.html"); will navigate back to the "home page".

Try looking at the structure of the Navigation App project template in Visual Studio or Blend. This gives you a cleaner and simpler view of how page controls and navigation work. In short, with this structure you never navigate to default.html, only to the name of a page control, one of which will be your "home page."

Answer 9

It is not the same with the structure of the sample. The 1_NavigationState.html has a div tag, and the  default.html has one div tag, too.

I don't understand Why I can navigate to 1_NavigationState.html But can't navigate to default.html ?

Answer 10

Please show the entire contents of both HTML files. I'm pretty sure one is structures as a page control and the other is not. If default.html is a container for the other page controls, then you simply don't navigate to it directly and expect to see anything meaningful. If that's still confusing, then I can only suggest that you study up on page controls and page navigation.

Answer 11

In default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>facebook</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- facebook references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>

<div id="contentHost">

	<button  id="Navigate">Navigate</button>

</div>
</body>
</html>

In 1_NavigationState.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>1_NavigationState</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="1_NavigationState.css" rel="stylesheet" />
    <script src="/js/1_NavigationState.js"></script>
</head>
<body>
    <div id="contentHost" class="_1_NavigationState fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to 1_NavigationState</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
            <button id="back">Go Back</button>
        </section>
    </div>
</body>
</html>

As I see, these two html files has almost the same contents. 

Answer 12

OK, what's probably happening here is that WinJS.Navigation.navigate doesn't itself do anything but fire some events, so something within the .js files of the pages need to be ready to pick up those events and actually load the HTML. Can you show both default.js and 1_NavigationState.js now?

Answer 13

default.js

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function ()
{
    "use strict";
    var scenarios =
    [
      { url: "/html/1_NavigationState.html", title: "Current Navigation State" },
    ];

    var app = WinJS.Application;



    app.onactivated = function (eventObject)
    {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch)
        {
            if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated)
            {
                // TODO: This application has been newly launched. Initialize 
                // your application here.
                
            }
            else
            {
                // TODO: This application has been reactivated from suspension. 
                // Restore application state here.
            }
            eventObject.setPromise(WinJS.UI.processAll().then(function ()
            {
                var navigate = document.getElementById("Navigate");
                navigate.addEventListener("click", navigateClickHandler, false);
            }));


        }
    };

    WinJS.Navigation.addEventListener("navigated", function (eventObject){
        var url = eventObject.detail.location;
        var host = document.getElementById("contentHost");
        // Call unload method on current scenario, if there is one
        host.winControl && host.winControl.unload && host.winControl.unload();
        WinJS.Utilities.empty(host);
        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
            WinJS.Application.sessionState.lastUrl = url;
        }));
    });


    

    app.oncheckpoint = function (eventObject)
    {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the 
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // eventObject.setPromise(). 
    };

    function navigateClickHandler(eventInfo)
    {
        // Navigate to either the first scenario or to the last running scenario
        // before suspension or termination.
        WinJS.Navigation.navigate("/html/1_NavigationState.html");
    }

    var page = WinJS.UI.Pages.define("/default.html",
    {
        ready: function (element, options)
        {

            // Initialize the ListView 
            WinJS.UI.processAll(element).then(function ()
            {

            });
        }
    });


    app.start();
})();

1_NavigationState.js

// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
    "use strict";

    WinJS.UI.Pages.define("/html/1_NavigationState.html",
    {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options)
        {
            // TODO: Initialize the page here.
            var back = document.getElementById("back");
            back.addEventListener("click", navigateClickHandler, false);


        },

        updateLayout: function (element, viewState, lastViewState)
        {
            /// <param name="element" domElement="true" />
            /// <param name="viewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
            /// <param name="lastViewState" value="Windows.UI.ViewManagement.ApplicationViewState" />

            // TODO: Respond to changes in viewState.
        },



        unload: function () {
            // TODO: Respond to navigations away from this page.
        }
    });

    WinJS.Navigation.addEventListener("navigated", function (eventObject) {
        var url = eventObject.detail.location;
        var host = document.getElementById("contentHost");
        // Call unload method on current scenario, if there is one
        host.winControl && host.winControl.unload && host.winControl.unload();
        WinJS.Utilities.empty(host);
        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
            WinJS.Application.sessionState.lastUrl = url;
        }));
    });

    function navigateClickHandler (eventInfo) {
        WinJS.Navigation.navigate("/default.html");
    }

})();

It just navigate to 1_NavigationState.html and navigate back to default.html, but shows a blank page when navigating back.

Answer 14

Thanks. The key in all this is the call to WinJS.UI.Pages.render calls that are trying to happen in both "navigated" event handlers of default.js and the other page. WinJS.UI.Pages.render looks for a WinJS.UI.Pages object in the page identified by the first parameter (url). This is what you have in 1_NavigationState.js, which is why it works. there is no such definition in default.js, and so if you traced through the code you'll find that WinJS.UI.Pages.render called for default.html actually fails (the promise returned by its .then method will likely contain an error). That is, since WinJS.UI.Pages.render doesn't find a page control (WinJS.UI.Page.define) in default.html, there is nothing to load and therefore you get a blank page.

As I've said before, default.html in a structure like this is intended to only be a host into which other pages are loaded and "navigated" to, which means that the navigation is simply loading and unloading fragments of HTML (the page controls) into the DOM of default.html. This is the structure that the code you're using assumes, which is why it doesn't make sense to try to navigate to default.html directly. Make another page like 1_NavigationState (or use Add > New Item > page Control in Visual Studio) to make other pages to which to navigate.

For a deeper discussion, please refer to Chapter 3 of my preview book, found on http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx. This will tell you all about page controls and the navigation model, as I won't be repeating any more of it here. You need, as i've said before, to deepen your understanding of this mechanism before just copying code between files and expecting it to work. The 1_navigationstate.js file you provided should not need a listener to WinJS.Navigation.onnavigated--you let the default.js handler do that and manage all the other page controls it loads into the DOM with WinJS.UI.Pages.render.

Answer 15

Thank you for the answer and for your patience.

The link should be  http://blogs.msdn.com/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx

The book seems very useful. 

Thanks again.