javascript - 检查浏览器是否支持 iFrame 上的 load 方法

Question

我正在尝试编写一个简单的表单，其中包含针对 iFrame 的文件上传。我已经基本涵盖了它，但 Internet Explorer 不支持动态生成的 iFrame 上的加载方法，因此我需要为其采取替代方法。我的问题是 - 使用 Javascript 识别浏览器类型的最佳、最准确(更简单)的方法是什么？

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

Answer 1

在我看来，检查这一点的最简单方法是:

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