An RSS feed reads this:
<media:thumbnail>http://...etc/foobar.png</media:thumbnail>
<media:largeThumbnail>http://.../thumb.png</media:largeThumbnail>
While parsing the response XML document after querying a REST server, I found myself clueless as to why Mozilla Firefox (my main development browser) was confused about the “media:thumbnail” tag. Clearly, “document.getElementsByTagName” should grab all the “media:thumbnail” tags–at least in IE/Safari it does–but why not the Fox? Well, Mozilla Firefox seems to respect XML namespaces and thusly doesn’t interpret “media:thumbnail” as a tag while iterating through the DOM. To find the tags (media:thumbnail), you must specify “video” as the string parameter for document.getElementsByTagName().
Wow, so how do I make an elegant solution out of this situation? Hah. As dirty as any AJAX developer can get, I believe the only real way of doing this is to implement “browser specific code”. Damn, I said it. I thought I’d never ever have to write browser specific code. So, firstly, let’s download the BrowserDetect object located at http://www.quirksmode.org/js/detect.html.
Alright, let’s get to it.
//Alright, we've got our response XML from the XHR request already.
var data = o.responseXML;
//Get all 's within the XML document
var items = data.getElementsByTagName('item');
//Let's iterate through the children of
for(var i = 0; i < items.length; i++)
{
if (BrowserDetect.browser == 'Explorer')
{
var thumb = items[i].getElementsByTagName(’media:thumbnail’)[0].firstChild.nodeValue;
}
else
{
var thumb = items[i].getElementsByTagName(’thumbnail’)[0].firstChild.nodeValue;
}
}
That wasn’t so bad. I’ve tested it across Safari, IE6/IE7, and Firefox. Works well! Thanks to Quirksmode for the browser detection JS object.
EDIT: Sorry about the code formatting! I’m very new to Wordpress’s features. ![]()