IE8 AJAX Navigation


Hi, I’m Sharath Udupa, developer on the IE team focusing on AJAX features for IE8. One of the AJAX improvements we adopted in IE8 from HTML5 is AJAX page navigations. In IE8 mode, we provide support for script to update the travel log components (for e.g. back/forward buttons, address bar) to reflect client-side updates to documents. This allows a better user experience where users can navigate back and forth without messing the AJAX application state.

For more information regarding the feature and sample code, refer to the Internet Explorer MIX08 Hands-on Labs for AJAX and IE8 Beta 1 for Developers. For an example of how this can be used to hook navigation in Silverlight (with sample code!), see Michael Scherotter’s blog  posts titled How IE8 Enables Silverlight Deep Linking and Browser Back/Forward Navigation and IE8 Forward/Back in a Silverlight 2 (Beta 2) Application for further details.

Sharath Udupa
Internet Explorer Developer

Comments (43)

  1. Steve says:

    Can you please post a direct link (not a link to a zip file of 25 random files) that includes the documentation on how to "set" and "get" a position in history?

    This is all we need, in a simple HTML document.

    e.g. MSDN.

  2. tony says:

    Woah… so I looked at the embedded PDFs in that zip.

    These were from Mix08, and CHOCK full of invalid and poorly formatted code!

    – – – –   – – –

    1.) the HTML doesn’t have a DOCTYPE, thus not a good IE8 example (or any version for that matter) – Hello Quirks?!

    2.) no head tag? just a script tag as the first child of the html tag. – classy… not

    3.) whats this <br> tag? it’s <br/>.  It has been for years.

    4.) <input type=text foo=bar… WHAT?! where are your double quotes on ALL attributes?

    5.) ah-ha, so instead of adding double quotes everywhere, random single quotes are used instead?

    6.) didn’t we already discuss that it is window.onmessage, not document.onmessage?

    7.) onClick="…" ?!?! I think you are looking for onclick (lowercase attributes in today’s web thankyou)

    8.) HTML, BODY, SCRIPT tags? come on guys, this isn’t 1997!

    Please, please! remember that your sample code is what developers learn from!  If you can’t write good quality code, pass the task on to someone that can.

    Grumble…

  3. Nathan says:

    @tony

    are the relevant bits correct?

    these are samples to show a technique – all of it doesn’t need to be perfect.

  4. Jana Vasseru says:

    @tony You forgot this GEM:

    Introduction in one of the PDFs:

    "Improving developer productivity is one of the primary goals of Windows® Internet Explorer 8 Beta 1 for Developers. We set out to achieve this goal in part by providing cross

    browser interoperability, standards compliance and additional powerful APIs."

    And (i guess) a corresponding example file:

    <H3><b>Taking … </b></H3>

    <BR><BR><BR>

    <div style="border: double 5px black;margin: 4px 4px 4px 4px; font-size: 40pt;">

    <span>This is for HTTP 1.1 servers: </span><span id="http_1_1" style="color: red;">Online</span><br />

    If it were 1 of April this would be a really good joke.

    How in the hell can you write a HTML example like that?

    I can take that it is a concept, thus is incomplete, but writing <BR> and <br /> in a single file? <b> and <H3> on the same line!?

    What the hell is <!DOCTYPE> supposed to be?

    How can you test anyting on an example which is so horribly wrong in so many ways?

    What the heck is going on here? Have you guys ever heard about http://www.w3.org/ ? Give the site a visit it’s very nice and useful when it comes to "standards compliance" Or perhaps you wouldn’t mind explaining the rest of the world what IE team means by "standards compliance".

    If you guys didn’t noticed – AJAX depends on Javascript (or JScript, call it wherver you like) and HTML DOM and HTML DOM depends on HTML.

    Oh dear, what was i thinking if you can’t manage to implement <button> tag correctly in 9 years, how naive of me that your approach would change.

  5. Joel says:

    @nathan – I looked at the docs too. I have no idea if the info is correct because I (like Steve) just want a link to the APIs.

    I have no intention of setting up an ASPX based app server on my Linux box just to see how to set and get an ajaxified page from the history.

    Also as noted by tony these examples WOULD not work in IE8 anyway because the INVALID HTML would force QUIRKS mode, under which all the new JavaScript options are not available (not to mention fallback to DOM ZERO anti-standards mode for DOM calls)

    Also keep in mind that many (read: most) of us do not use (nor plan to) silverlight, thus the code samples that make use of this are usless to us.

    Jana is right. This thing called the W3C is our number 1 priority.  If your code doesn’t take this into account, please do not bother posting.

    joel

  6. Jana Vasseru says:

    @nathan

    They are not, since there is no way to tell. What is that document anyway? is it HTML ? XHTML ? which version? What is <script>? in what language it is supposed to be written?

    And before you say it is not important – this is extremely important given the facts that:

    1) as usual i’am left to guess what MS meant by somthing, that’s exactly the starting point for horrible errors like ‘why is document.getElementById() actually getting elements by name?’ -> see? everyone GUESSED that the function will do what the name implies and bumped. And again given the existing appaling approach of MS to standards it is VERY important so that we know what MS is talking about.

    2) eg. in xhtml some of the examples should not even parse let validate

    3) every sane developer knows that in order to get something working you first need a valid input, and whatever theese examples are, they are definitelly not a valid input. When you got valid input right, you can move on to invalid input and try handling that.

  7. wilson says:

    extracted from:

    http://blogs.msdn.com/synergist/archive/2008/07/10/how-ie8-will-enables-silverlight-deep-linking-and-browser-back-forward-navigation.aspx

    The important part is here:

    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.

    ================

    Bingo. Simple to the point.

    Why Sharath could not put this in the post directly baffles the mind.

    PS as for the ‘click’ sound, I sure hope that turning this silly setting off in:

    [Control Panel > Sounds > Start Navigation]

    Will still be in effect.  This is the first setting change I make on installing windows after "unhiding" known extensions for filetypes.

  8. I think this will be one of the greatest features introduced in a long time! In example my website would benefit greatly from it…

    http://www.jabcreations.com/blog/?prompt=options-basic

    Now if we could just get some addEventListener support (which is supported in Gecko 1.8, Opera 9.0, and Safari 3.0+) IE would be reasonably tolerable…

    http://www.jabcreations.com/blog/?prompt=themes-editor

  9. Steven says:

    @tony: I’m no IE lover, and its obvious these code samples were slapped together by a class of fifth graders.

    But to be fair, I think you are mixing your specs – I’ve addressed some of the misconceptions you outlined above (especially regarding quotes and closing tags) – the numbers correspond to your list:

    2.) The <head> tag is not required, and nowhere does it say a <script> tag has to be in a head tag. No faults there.

    3.) HTML5, like HTML4, doesn’t require self-closing tags, so <br> is fine. So is <ul> <li>one <li>two <li>three </ul>. You just assumed the page was XHTML, which isn’t your fault since they didn’t have a doctype.

    4.) Once again, HTML5 specs don’t require quoted attributes. <input type=text> is perfectly fine.

    5.) What’s your obsessions with single quotes or double quotes? XHTML/HTML specs don’t care, why should you?

  10. Victor says:

    @Steven

    Lets rephrase it then.  If a person was looking for a job and they came to you with this as an example of their code would you even consider them for a position as a developer?

    In most offices I know this code would secure you a position at the bottom of the "paper for recycling" pile.

  11. Catto says:

    Hey Now,

    Great Post, I’d really like to see how spacial navigcation in browsers will be implemented. Such as using hte arrow keys now tab & shift tab to areas of focus.

    Thx 4 the info,

    Catto

  12. Ted says:

    any of you fools whining about sample code stop to think that mayb the ie guyz have better things to do with thier time then write up html?  like, maybe, finishing the browzer?

    if thier company is anything like ours, they made some poor english major write the help anyway.

  13. Les says:

    "What’s your obsessions with single quotes or double quotes? XHTML/HTML specs don’t care, why should you?"

    Because some people value consistency. It’s a minor issue though and of little concern since the page words regardless.

    "4.) <input type=text foo=bar… WHAT?! where are your double quotes on ALL attributes?"

    Yet you didn’t complain about the non-existent foo attribute? Sounds to me like you’re just some newbie code monkey who can’t write basic HTML. *REAL* web developers would have noticed and complained (I can speak for the whole community because I am one of the true *REAL* developers).[/troll]

  14. World says:

    Great work. I’d really like to see how spacial navigcation in browsers will be implemented.

  15. Dao says:

    So the only new thing here is the hashChanged event, right?

  16. Mitch 74 says:

    @Ted: when you publish something, you try and make sure it is readable, right? That’s the point in publishing. I mean, even private documentation requires a bit of polishing to stay readable

    Thus, it would stand to reason to think that documentation that is open for everyone to see would be at least a bit… licked.

    Instead of that, we get what would pass off as ‘tag soup’, plain and simple.

    How would you like one of your developers, or even better, one of your software providers, dumping a set of annotated, damaged, incomplete and unordered printout folders when you ask them for their software documentation?

    When you give out sample code, you do it right – that means, clean, consistent, complete code that doesn’t hit this or that well-known browser bug or mis-implementation. And right now, that actually means XHTML 1.0 Strict Annex C code, or HTML 4.01 Strict following "best practice" coding – meaning, closing your tags (the IE table-as-inline-element bug is avoided here), code in lower case for tags, attributes and values (avoid getElementById etc. case sensitivity – or lack thereof in IE – if everything is lower case), logical tag hierarchy (valid code structure), and separated style.

    Or, you can keep creating tag soup, encourage others to do the same, and look surprised when you boss asks you why the site he asked you to make blows up on a browser update.

  17. 8675309 says:

    when are we going to see better canvas object support

  18. Ted says:

    Mitch– Haha… real companies don’t waste valuable win32 developers writing html samples.  they’ve got better things to do.

  19. That´s is good thing for Ajax developers, but we need write more and more codes, for build a good web application.

    Some times, i preffer a old client script application for somethings.

    Bye!

  20. Stifu says:

    Ted: don’t delude yourself, there is simply no excuse for this. Microsoft wants us to believe they care about standards now, telling webmasters to fix their site for IE8 and all that, yet still do the opposite of what they preach.

  21. anonymous says:

    Don’t forget that you still haven’t achieved the expected standards support even in IE8 and that ppl expect you to be fully standards compliant (99%+) or very very close to competing browsers by IE9 (SVG, XHTML, DOM3, CSS3, APNG etc everything). Meanwhile, keep looking at http://blog.seanalexander.com/content/binary/ApplesMobileMedoesntfullysupportpopularb_3CBD/Capture.jpg once in a while to remain motivated.

  22. Steve says:

    @Ted,Mitch and all others on the code quality thread (including the Epic Fail post that got deleted)

    As Stifu mentioned, this is about providing professional example code if you are trying to "teach" someone how to do something.

    Even if the first draft published contains error(s), it is well advised to re-publish new versions with the revised code and provide an edit note to the post indicating that issues were fixed.

    I took one of the files from the zip from MIX08,… dom.storage.html   did a small cleanup on it and dumped it into pastebin as HTML 4.01 Transitional (since the form had a name, etc.) to ensure it had a doctype.

    Total time to do this? about 20 seconds.  MSFT should have no trouble doing the same.

    Revised version of: dom.storage.html

    http://pastebin.com/f3544139

  23. Steve says:

    @anonymous: Is that the same MobileMe site that uses tables for layout, and is littered with inline styles?

  24. Erel says:

    This is off-topic but with IE8 will we be given the option to view RSS feeds as a long list of links just as in Firefox, instead of a preview page?

    I would really appreciate this if you could have this feature, or even better, if it was the default.

  25. Nathan says:

    @Erel,

    yes.  you can do this in the 8 beta at least.  I believe if you right click on a feed in the feed list, there is an option to add it to the toolbar and that will function just like the live bookmarks in ff

  26. Chris says:

    I guess some of you people just read a couple of CSS books and now you’re all experts huh?

    He’s not designing you a website he’s showing you an example. I guess some of you have never seen a tech demo before.

  27. Stifu says:

    Chris: you’re missing the point. Whether it’s a site, an example or whatever… They’re using X/HTML, and should at the very least use clean and consistent code, even if it doesn’t validate (or stop acting like they actually care about standards).

    It’s not about being a CSS expert or not, it’s about showing the *good* example to people… as well as showing some respect (rather than disdain, carelessness, laziness or arrogance, pick whichever) to the developers this doc has been made for.

  28. Chris says:

    no, you’re missing the point.

    It’s a code example. Stop getting you panties in a twist.

  29. Stifu says:

    Yes, it’s an example. All the more reasons for it to be one that shows how to do things *right*.

    In my books, "example" doesn’t automatically equal "bad", "rushed" or "half-assed".

  30. Jonathan says:

    @Chris – "It’s a code example. Stop getting your panties in a twist."

    Not quite. It’s a BAD code example.  The kind you would be embarrassed to show because it is BAD.

    I wouldn’t show off my new fuel injection system to car buffs, and introduce them to kicking the tires to see if the car is up to snuff.

    If I were an Architect, I wouldn’t show off my aluminum shed that I built with tin snips and duct tape.

    If I was trying to show off the latest and greatest technology, I would use nothing but the latest and greatest.  Since it is code, I would be damn sure that it was as high quality as I could make it, ensure that it meets standards, and works in (or degrades nicely) all browsers.

    From the sample code I saw:

    a.) It wouldn’t work in IE8 (or any other browser because the files were not correctly set up.

    b.) It would throw errors in IE6, IE7 because there was no handling provided for legacy browsers.

    c.) It wouldn’t work in any NON-MSIE browsers, not because they can’t support things like global storage (because they can) but because proprietary non-standards code was used to set up event handlers and such.

    Not only is this not a "small issue" that we are getting all hyped up over, its part of a huge issue, that MSFT has (other than Chris Wilson’s efforts**) made ABSOLUTELY ZERO efforts to seriously bring MSFT’s code, examples, and HTML/DOM/CSS/JS up to date with Web Standards.

    Several claims on this blog have been made to indicate that MSFT is taking standards seriously, but very little in the posted code samples has in any way matched those statements.

    **Chris Wilson has always pushed for standards (without "breaking the web"), and the recent updates to standards based DOM support in IE8 (more standards mode), and rendering in standards mode by default he’s proven that he stands behind those words.  I’ve yet to see anyone else from the IE team step up to the plate.

  31. billybob says:

    I agree about the examples – I would be embarrassed to show examples like that.  How can something like that ever be included in training manuals and standards definitions?

    Now – why should we use this new feature?  It only works on IE 8 which will probably be around 15% of my userbase, and it is not standard so is not guaranteed to work in the future.

    Why not concentrate on implementing current standards rather than creating your own IE8 standard (much like your unloved IE6 standard)?  You are just creating more problems for yourselves in the future by not working with everyone else on standards that everyone can use.

    I am not saying this is a bad idea, but why not work with everyone else rather than seeming to be working against the entire industry.  I agree with Apples stance on IE7.  Why should we all waste our time and money on your half-baked browsers?

  32. Mitch 74 says:

    @Ted: considering win32 developers embed IE engines to display help files or other point-n-click interfaces, you tell me in essence that win32 developers are supposed to do sloppy coding.

    You just insulted a bunch of developers. Well done!

    [rant]

    You’ll also tell me that it’s normal if a win32 developer doesn’t pass the FizzBuzz test, because time is too valuable to spend five minutes writing a dumb algorithm just to be sure you’re hiring a developer, not a monkey trained to put coloured blocks together?

    [/rant]

    Cleaning up an HTML sample can be done very rapidly with HTMLTidy – you get much cleaner code in under a second. It’s included with Amaya and (if memory serves) Nvu, if you don’t want to look for the command line tool. If you created your sample with a little bit of care, this last pass will make it close to perfection.

    It would at least be publishing-worthy, instead of that… tag soup we got.

  33. Ted says:

    Mitch… Poor guy.  Hope you find a more interesting job.  I suppose that might cut back on your time to leave such valuable insights here though.

  34. Ted says:

    billybob, I suppose in the kerfuffle about how html samples should be provided, you might have overlooked the fact that this is part of the html5 standard, not some mythical "ie8 standard".

    Surely agree with the world’s stance on safari?  It’s fast, but it’s also full of security holes.  Surfing with safari is like carrying a big sign that says "pwn me!"

  35. billybob says:

    Ted: My apologies, I missed the reference to hashchange on the HTML 5 spec.

    As per usual though, there are lots of IE only examples and some incompatibilities which will bite someone one day, or will require everyone to write wrapper scripts.

    The spec says:

    "Firing a simple event called e means that an event with the name e, with no namespace, which does not bubble but is cancelable"

    MSDN says:

    "Bubbles Yes"

    Even the MSDN document says

    "Standards Information

    There is no public standard that applies to this event."

    The only cross platform way to add this event is the onhashchange attribute, which is not part of the standard.  addEventListener is the way to go…

  36. pcdinh says:

    IE8? Is that true? What a big version right? However, from what I have seen from your source code (bad-formed HTML and Obtrusive Javascript), I think that you mentioned IE6 + 2. What are you trying to improve if you don’t have any idea on standard-based design principles?

    Please feel free to disagree wih me but IE6+2 is a better name than IE8

  37. Mitch 74 says:

    @Ted: please waste 5 minutes and complete the following test:

    Write a (C/C++/C#/ASP/PHP/JS/whatever language rocks your boat) program that outputs all numbers from 1 to 100 on screen, but replaces all multiples of 3 by Fizz, all multiples of 5 by Buzz, and all multiples of both by FizzBuzz. You have a single, small sheet of paper, a pencil, 5 minutes and no eraser.

    If you succeed (you need to do it correctly), then great: you’re one of the 0.5% of the developers group who can actually program your way out of a paper bag. If you don’t, I laugh in your general direction (and yes it’s a misquote).

  38. JamesB says:

    Here is a short video, demoing a sample application that uses window.location.hash

    and onhashchange.

    It’s far from professional though – the guy barely speaks English and the ‘code’ is shown in *Microsoft Office Word 2007* with spell checker enabled.

    http://download.microsoft.com/download/B/D/2/BD294C35-7BBD-4AF5-9ECA-5D902116C260/ie8b1_ajax_navigation.wmv

  39. sOKzZuKa says:

    XML objects and methods compatibile with W3C specifications please!

  40. German says:

    @JamesB

    The guy speaks English (with what I think is an central African accent)… maybe not the one you are used to… Do remember the tune "you say tomato and I say tomahto"?

    Using Word for code presentation is terrible, granted.

  41. An Irritated But Loyal IE User/Developer says:

    I realize this isn’t an ideal place to post this comment, but it is navigation-related and this seems like one of the few forums people on the IE team actually monitor.  (With that being said, my apologies if there is indeed a more proper place.)  I beg you, IE team, I plead with you, give users the option to turn off the "Backspace" button press=equals go back to the previous page "feature" in the IE 8 RTM version 9or better yet, beta 2).  I know developers can turn this off on their text-entry pages with Javascript (and they should) but many choose not to.  

    This functionality can be turned off in the FF "about:config" panel, and having done so I’m now using FF for most of my posting to forums, etc. and IE for most of my browsing (I like IE’s tabs implementation much better than the one in FF), but that’s probably untenable as a permanent solution for me.  

    I don’t want to underestimate the seriousness of making even minor changes to IE, but I can’t see how it would be that hard/disruptive to add yet one more option to the "Advanced" tab in the "Internet Options" screen so that one can switch off this extremely irritating default function if one so chooses.  

    In any event, thanks for your time.      

  42. Mitch 74 says:

    @An Irritated But Loyal IE User/Developer:

    I don’t really think that can be done that easily, as you’re hitting on a basic interface event handler here. Deactivating backspace=window.history.back() may yield such problems as the backspace key being deactivated for all applications in Windows having an history functionality (after all, this is a ‘window’ object property’s method); in the best of case it can be disabled at a user level, but if it can’t then, all users will have backspace deactivated too (system-wide setting). I would guess Vista may prevent that through protected mode (that always makes me think about i286 protected…), but since XP is with us for 5 more years…

    That’s a risk MS can’t take, considering MS software’s history of having strangely changing settings from one session to another (locale switching back and forth from French to US without any user intervention, for example): Joe User not having his backspace key working any more after a reboot would lead to quite an outcry. Please note that this is true of Firefox too, however in their case it doesn’t lead to a system reinstall/format, and about:config is easier to edit than the win32 registry.

    You can try something else: program a webpage that loads any other page in an iframe (to make things easier, you can recreate the basic navigation controls at its top, the iframe taking up the rest); your parent webpage intercepts the backspace key, you get what you’re looking for. Now let’s just hope that security measures won’t impede that too much…

    The second-best solution would be to add this setting to a Trident-based browser like Maxton.