Question

我正在尝试使用针对iFrame的文件上传来编写一个简单的表单。我已经覆盖了它，但是Internet Explorer不支持动态生成的iFrame上的加载方法，所以我需要为它做一个替代方法。我的问题是 - 使用Javascript识别浏览器类型的最佳和最准确（加亮）方法是什么？

我知道Modernizr可以检查特定的方法/属性，但不确定它是否可以在这个特定的场景中提供帮助。它有Modernizr.hasEvent()，但我不能用它来检查动态创建的元素。

Answer 1

如果您想检查对特定事件的支持，可以尝试这样的事情：

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;
  })();

这是上面的现场演示：

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

Answer 2

在我看来，最简单的检查方法是：

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

其中iFrameVar是对iframe的引用，当然：

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

只是一个quick fiddle，举例说明如何使用函数检查各种元素的事件支持。

回复你的评论：如果你想检查ajax回复中的动态内容，你只需使用readystatechange事件：

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

Answer 3

使用navigator.userAgent。它包含浏览器用户代理

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

检查浏览器是否支持iFrame上的加载方法

3 个答案: