Question

I’m trying to code a simple form with file upload which targets the iFrame. I’ve got it pretty much covered, but Internet Explorer does not support load method on dynamically generated iFrames so I need to do an alternative approach for it. My question is – what’s the best and most accurate (plus light) way of identifying the browser type using Javascript?

I know that Modernizr can check for specific methods / properties, but not quite sure if it could help in this specific scenario. It has Modernizr.hasEvent(), but I can’t use it to check the dynamically created elements.

Answer 1

The easiest way to check this, to my mind would be:

if ('onload' in iFrameVar)
{
    console.log('your code here');
}

Where iFrameVar is a reference to an iframe, of course:

function elemSupportsEvent(elem,e)
{
    var f = document.createElement(elem);
    if (e in f)
    {
        console.log(elem + ' supports the '+ e + ' event');
        return true;
    }
    console.log(elem + ' doesn\'t support the '+ e + ' event');
    return false;
}
elemSupportsEvent('iframe','onload');//logs "iframe supports the onload event" in chrome and IE8

Just a quick fiddle by means of example of how you can use a function to check event support on various elements.

In response to your comment: if you want to check for dynamic content -as in ajax replies- you could simply use the readystatechange event:

xhr.onreadystatechange = function()
{
    if (this.readyState === 4 && this.status === 200)
    {
        var parent = document.getElementById('targetContainerId');//suppose you're injecting the html here:
        parent.innerHTML += this.responseText;//append HTML
        onloadCallback.apply(parent,[this]);//call handler, with parent element as context, pass xhr object as argument
    }
};
function onloadCallback(xhr)
{
    //this === parent, so this.id === 'targetContainerId'
    //xhr.responseText === appended HTML, xhr.status === 200 etc...
    alert('additional content was loaded in the '+ this.tagName.toLowerCase+'#'+this.id);
   //alerts "additional content was loaded in the div/iframe/td/whatever#targetContainerID"
}