Event 1059 - Ajax Navigation

  • Article
  • Logged Message
  • What Is It?
  • When Is This Event Logged?
  • Example
  • Remediation
  • Related topics

Logged Message

Windows Internet Explorer 8 has a new HTML5 Asynchronous JavaScript and XML (AJAX) navigation feature that allows sites to maintain and track changes in AJAX states by treating them as a navigation. This means sites setting the window.location.hash on the window to mark a state change (like zooming in a map) now create an entry in the travelog/Back button in Windows Internet Explorer, enabling the user to go back to the previous state. This can be problematic for sites that were using the location.hash to send data between cross-domain components, like iframe objects in the page.

What Is It?

A page can update the hash of the URL by changing the window.location.hash property. Doing so adds an entry to the travelog of the current page. The effect is that when you click the Back button you'll navigate to the last value of window.location.hash rather than the last page you visited. Consider a simple example:

Assume you have a mapping site that uses AJAX controls. The user navigates to the site which adds an entry to the travel log. The user then performs the following functions:

A. Enters a street address and clicks a button to display the corresponding map.

B. Places a push pin at a location on the map.

C. Zooms in.

The developer has written the site so that each of these actions results in updating the window.location.hash property. Each time this happens, Internet Explorer 8 updates the travel log. The end result is that when the user clicks the back button three times, this is what happens (in order):

  1. The user is returned to [B] – the push pin exists but the map is no longer zoomed in.
  2. The user is returned to [A] – the map of the entered address is displayed but without the push pin.
  3. The user is returned to the initial page for the mapping site.

Each time you set the window.location.hash property two important things happen:

  • The previous URL, which may contain a previous hash fragment is added to the travel log (so clicking the back button returns to that URL).
  • A onhashchange event is raised.

This behavior works well for new AJAX-enabled websites. The potential problem is that some websites manually manipulate the hash of the URL for their own purposes. So introducing code that explicitly sets window.location.hash (and modifies the URL) might break those webpages.

When Is This Event Logged?

This event is logged when a webpage sets window.location.hash. This applies only if you are in IE8 Standards mode.

Example

Perform the following steps to see this event logged in the Internet Explorer Compatibility Test Tool:

  1. Create a webpage with the following contents. For this example call it 1059.html.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
    <title>AJAX MAP</title>
</head>
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">
    var oMap = null;
    var iZoomLevel = 0;    
    function GetMap()
    {
        oMap = new VEMap('myMap');
        oMap.LoadMap();

        oMap.AttachEvent("onendzoom", ZoomHandler);
        iZoomLevel = oMap.GetZoomLevel();
        window.location.hash = iZoomLevel;
    }

    function ZoomHandler(e)
    {
        iZoomLevel = oMap.GetZoomLevel();
        window.location.hash = iZoomLevel;
    }

    function HashChangeHandler()
    {
        var hash = window.location.hash;
        var iNewZoomLevel = hash.substr(1);

        if (iNewZoomLevel != iZoomLevel)
        {
            iZoomLevel = iNewZoomLevel;
            oMap.SetZoomLevel(iNewZoomLevel);
        }
    }
</script>
<body style='overflow: scroll; heigth:100%' onload="GetMap();" onhashchange="HashChangeHandler();">
    <div id='myMap' style='position: relative; width: 500px; height: 500px; valign: center'></div>
</body>
</html>

  2. Install the file in the root directory of the local web server. On an Microsoft Internet Information Server (IIS) server this means putting the file in this directory:

    .\wwwroot

  3. Browse to the file:

    https://localhost/1059.html

  4. Click the zoom-in control (the magnifying glass in the upper left with the plus (+) sign). The URL changes after the #.

  5. Click the Back button in the browser.

You're returned to the previous zoom setting. And notice that the hash fragment in the URL is restored to the value before you zoomed into the map.

Each time the window.location.hash is set, this event is logged.

Remediation

The behavior described for this event only occurs if the page is being rendered using IE8 mode. So putting the page into IE7 Standards mode is a workaround. In this case, setting window.location.hash will not affect the travelog.

Internet Explorer Application Compatibility

Events 1056 through 1073

Introducing AJAX Navigations