CODEWITHSUNDEEP
javascriptinternet-explorerbrowserload
Spencer Mark
Spencer Mark

Reputation: 5311

Check if browser supports load method on iFrame

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.

Upvotes: 0

Views: 849

Answers (3)

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76405

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"
}

Upvotes: 1

Shreedhar
Shreedhar

Reputation: 5640

if you want to check support for particular event, you can try something like this :

var isEventSupported = (function(){
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

here is a live demo for the above :

http://kangax.github.com/iseventsupported/

Upvotes: 1

Daniil Ryzhkov
Daniil Ryzhkov

Reputation: 7596

Use navigator.userAgent. It contains browser user agent

if (navigator.userAgent.search("MSIE 6") == -1){
    // We've got IE.
}

Upvotes: 0

Related Questions