if you have visited a website lately that uses Flash, perhaps you have noticed a thick gray border around the Flash movies that you could have sworn wasnt there before. it isnt there in Firefox or Safari or Opera, only in IE. well, no, you arent losing your mind - it really *didnt* used to be there.
back in february (2006), Microsoft released an update to IE that causes this change. the change was a patch released in response to a lawsuit brought against Microsoft by Eolas, who claimed they held a patent on embedding content in the browser using 'plug-ins'. after a victorious judgement for Eolas, Microsoft decided to just change the behavior of IE instead of pay the judgement (something to the tune of $500 million dollars - you can read more about it at http://www.digitalproducer.com/articles/viewarticle.jsp?id=38506)
for their part, Macromedia (err...Adobe) knew that this change would reflect badly on them, even though they were innocent bystanders as well. they proposed their own solution(http://www.adobe.com/devnet/activecontent/), which was essentially the same solution as Microsoft, but geared a little more toward Flash developers.
i decided that a new approach was needed. i set the following requirements for any solution:
- OBJECT and EMBED tags should be in regular HTML and work as normal
- minimize changes required for developers to implement the solution
- be cross-browser compatible
the solution i came up with is actually quite simple. it involves simply wrapping the normal OBJECT and EMBED tags in a NOSCRIPT tag like this:
var flashContainer = document.getElementById("FlashMovie");
var flashMovie = document.createElement("div");
flashMovie.innerHTML = decode(flashContainer.innerHTML);
var output = input;
output = output.replace(/</g, "<"); output = output.replace(/>/g, ">");
essentially, all it does is read in the contents of the NOSCRIPT tag, and then write them back out in a new, dynamically added DIV tag. The 'decode' function is necessary because Firefox automatically escapes the contents of the NOSCRIPT tag (i dont know why and could not find any documentation about it - other HTML tags do not exhibit this behavior). some of you might cringe at the use of innerHTML, but in this case, it fits the bill perfectly and is still way better than using document.write and concatenating the HTML string together.
this solution fufills all of the initial design goals:
- the OBJECT and EMBED tags remain in the HTML source, full editable like normal
- the changes simply require wrapping the intial code in a NOSCRIPT tag and linking in the external .js file, minimizing tedious changes for developers
- the technique works across all various current-generation browsers
the code here is very simple but could easily be extended to automatically handle multiple different Flash objects on the same or multiple pages (document.getElementByTagNames looking for OBJECT would be a good start, then just traversing the DOM tree to get the elements you needed). come to think of it, you could probably get by without the NOSCRIPT altogether and just find the OBJECT content and re-write it out dynamically while nulling out the original innerHTML.
hopefully this will help those of you who have been frustrated by this recent 'feature' released by Microsoft.