javascript - 是否有跨浏览器和跨框架的方法来检查对象是否是 HTML 元素？

Question

给定一个对象 obj ，我想检查该对象是否是 native HTML 元素。我可以这样做:

if ( obj instanceof HTMLElement )

但这不适用于跨帧(例如来自 <iframe> 的对象)，因为每个帧都有自己的 HTMLElement构造函数。或者，我可以这样做:

if ( obj.tagName ) 

但这并不安全/可靠，因为这样的属性可能会(无意)添加到对象中。

那么，有没有可靠的方法来做到这一点？

Answer 1

您可以使用以下内容，接受这样一个事实，即这仅适用于支持 HTMLElement 作为基本构造函数的 UA:

/// testing vars
var localBody = document.body;
var foreignBody = document.getElementById('iframe').contentDocument.body;

/// useful function
var deriveWindow = function( elm ){
    return elm && 
        elm.ownerDocument && 
        (elm.ownerDocument.defaultView || 
        elm.ownerDocument.parentWindow)
    ;
};

/// instanceofs
console.log( localBody instanceof HTMLElement );
console.log( foreignBody instanceof HTMLElement );
console.log( localBody instanceof deriveWindow(localBody).HTMLElement );
console.log( foreignBody instanceof deriveWindow(foreignBody).HTMLElement );

输出会因浏览器而异，Firefox 25(在 Windows 7 上)给出:

true
true
true
true

而 IE 11、Opera 12、Safari 5 和 Chrome 31(在 Windows 7 上)都提供:

true
false
true
true

fiddle :

• http://jsfiddle.net/9sGx5/7/
• http://jsfiddle.net/9sGx5/7/embedded/result/