How IE8 Enables Silverlight Deep Linking and Browser Back/Forward Navigation - Synergist - Site Home

One of new features in the next version of Internet Explorer (IE8) was created specifically for AJAX applications and can add significant functionality to Silverlight applications as well. Here is the description of the feature (from Better AJAX Development):

In IE8 mode, Internet Explorer treats window.location.hash updates like navigations and saves the previous document URL. The following actions occur as a result:

The previous URL, which may be from the previous hash fragment, will be updated in the Address bar, Back button and other browser components.

A “click” sound will play as if a traditional navigation occurred.

A new hashChanged event will fire.

In a Silverlight application, an issue that affect usability is that the Back/Forward navigation buttons are not used because all of the "paging" and navigation occurs in the context of a single page. This can be problematic because people are used to seeing their page history and navigating their page history. This new feature in IE8 can enable a Silverlight application to both add these pseudo page-views to the browser history and lets the user navigate among those page views and easily deep link to them. These techniques make the most sense for Silverlight applications that provide a full-page browser experience. To see it in action,take a look at pages from a Journal that I created from studying architecture in Europe in1992.

Here is how you would enable the functionality in your Silverlight 1 application:

Download and install the IE8 Beta
On the HTML page that your Silverlight application is hosted, add this meta tag to the <head> section:
```
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
```
In the startup code for the page, add an event handler to the document.body for the onhashchange event
```
document.body.onhashchange = OnHashChange
```

Implement the OnHashChanged event callback to programatically navigate to the page/view within the Silverlight application (only if the hash changed happened via back/forth & history navigation). Here's how I implemented the OnHashChange handler for my Page Turn sample:

NavigationManager.prototype.OnHashChange = function()
{
    var journalPage = this.nextOddPage - 2;
    
    var hashPage = Number(document.location.hash.substr(5));
    
    if (hashPage != journalPage)
    {
        this.jumpToPage(hashPage);
    }
}

In your Silverlight code, when the page/view of your application changes, update the document.location.hash value accordingly. In the Page View sample, I adapted it to use hashes like #Page00, #Page01, #Page12 for each page. You should also update the document.title here so that the page history title shows useful information about the state of the application. Updating the document.location.hash will also update the URL in the browser. This basically enables a "deep link" to the page/view in the Silverlight application. An important aspect of the code to note is that if you update the window.location.hash and the document.title, you should update the hash before updating the title.
In my page turn sample app, this TrackPage() function is called whenever the page changes:
```
NavigationManager.prototype.TrackPage = function()
{
    var number = this.nextOddPage - 2;
    
    var hash = "";
    
    var title = this.Title;
    
    if (number == 1)
    {
        hash = "Page" + getTwoDigitInt(number);
        
        title = this.Title + " Page " + String(number);
    }
    else if(number > 1)
    {
        hash = "Page" + getTwoDigitInt(number);
        
        title = this.Title + " Pages " + String(number-1) + " & " + String(number);
    }
    
    window.location.hash = hash;
    
    document.title = title;
    
    TrackEvent(hash);
}
```
Add code to your application so that if a document.location.hash value is specified, the starting application view/page will reflect that state. In the page view sample, I added the following code to the PageTurn.prototype.downloadComplete event handler:
```
this.navigationManager.jumpToPage(pageNumber);
```

Once you have done these steps, your Silverlight 1 application can take better advantage of the IE8 browser capabilities and provide an easy way for your users to navigate and share (with deep links) the application. To see a deep link in action, go to this page and download the source code here. My next article will show how to do the same thing with a Silverlight 2 application.

7/11/2008 Update: here is an article and the source code for how to do this in Silverlight 2 (Beta 2).