Thursday, January 24, 2008

IE Flash Bug

Take a look at this page, and view its source. The key is this little bit o' JavaScript:

function loadSwf(){
window.location.hash ="mark";
var str="<embed src='http://gglabs.com/~clg/flash/YouTube.swf'
type='application/x-shockwave-flash' wmode='transparent' height='800'
width='800'></embed>";
document.getElementById("container").innerHTML = str;
}


What does this do? If you are on IE, then it changes your URL to http://whatever#mark, if http://whatever was your original URL. It then drops a chunk of HTML into the page that embeds a Flash movie. What makes this interesting is if you look at the title. It is not "Test Page" as it should be. Instead it is "Test Page#mark".

This only happens on IE, but on both IE6 and IE7. I'm certain this must be documented somewhere...

Why does this matter? Well it is very common to use hashes to keep track of page history in Ajax apps. For example, in the above app let's say that I write some page initialization code that looks for #mark in the URL. If it finds it, then it goes ahead and loads the SWF. This allows the page to bookmarked and enables browser history (there's actually more you have to do for browser history on IE, but that is another topic.) In this example, we are just loading a page element dynamically, but you can imagine how useful this is for Ajax apps.

So if you are using this technique for managing history/bookmarks and happen to have a SWF on the page, you get crazy page titles. If you think this is a cooked up example, there is actually an example of this "bug" right now on a beta version of a certain high traffic page on the web...

2 comments:

Anonymous said...

This happens even in IE9!

Naat said...

Everything is very open with a really clear explanation of the issues. It was really informative. Your website is very helpful. Thank you for sharing!