Is there really no way to expose the prototype of a html element in IE (<8)?

前端未结

关注

 3  2041

I cooked up a pattern to create and extend html elements using their prototype. This works like a charm in non-ie browsers. Example code can be found @jsbin (see page source

相关标签:

3条回答

无人及你

2020-11-30 14:46

No, nor is it guaranteed you can fiddle with DOM objects' prototypes in JavaScript in general. The DOM objects are not part of the ECMAScript spec; they may not be (and traditionally speaking aren't) native JavaScript Objects at all, in any browser.

This is why frameworks tend to have their own ‘container’ wrapper classes.

Also you cannot rely on ‘t.el.constructor’ even if they were native JS Objects. ‘constructor’ is not a standard property, isn't available in IE, and even in Mozilla doesn't do what you might think it does. Avoid.

0 讨论(0)
发布评论:

提交评论
- 加载中...
悲&欢浪女

2020-11-30 14:53

Yes there really is no way to do this.

IE elements are based COM objects which actually don't allow arbitary members to be added to their interfaces (in COM, interfaces are a contract and should never change). Implementation of these interfaces cannot be extended by Javascript, the elements simply are not prototypal.

IE adds a special interface designed to work with Javascript to allow the addition of new members to a specific instance but you cannot add a new member to 'class' since there is no prototype to fiddle with.

0 讨论(0)
发布评论:

提交评论
- 加载中...

天命终不由人

2020-11-30 14:54

The following, cut and pasted from the article HTMLElement doesnt work in IE. Examples works perfectly in IE and Firefox.

<html>
<head>
    <script type="text/javascript" src="DOMElement.js"></script>
    <script type="text/javascript">

        var DOMElement =
        {
            extend: function(name,fn)
            {
                if(!document.all)
                    eval("HTMLElement.prototype." + name + " = fn");
                else
                {
                    //
                    //  IE doesn't allow access to HTMLElement
                    //  so we need to override
                    //  *document.createElement
                    //  *document.getElementById
                    //  *document.getElementsByTagName
                    //

                    //take a copy of
                    //document.createElement
                    var _createElement = document.createElement;

                    //override document.createElement
                    document.createElement = function(tag)
                    {
                        var _elem = _createElement(tag);
                        eval("_elem." + name + " = fn");
                        return _elem;
                    }

                    //take copy of
                    //document.getElementById
                    var _getElementById = document.getElementById;

                    //override document.getElementById
                    document.getElementById = function(id)
                    {
                        var _elem = _getElementById(id);
                        eval("_elem." + name + " = fn");
                        return _elem;
                    }

                    //take copy of
                    //document.getElementsByTagName
                    var _getElementsByTagName = document.getElementsByTagName;

                    //override document.getElementsByTagName
                    document.getElementsByTagName = function(tag)
                    {
                        var _arr = _getElementsByTagName(tag);
                        for(var _elem=0;_elem<_arr.length;_elem++)
                            eval("_arr[_elem]." + name + " = fn");
                        return _arr;
                    }
                }
            }
        };

        DOMElement.extend("foo",function(){alert('bar')});
        DOMElement.extend("about","DOMElement v0.1")
        DOMElement.extend("contents",function(){return this.innerHTML})
        var elem = document.createElement("div");
        elem.foo();

        onload = function()
        {
            var elem2 = document.getElementById("myDiv");
            alert(elem2.about);

            var divs = document.getElementsByTagName("div");
            for(var i=0;i<divs.length;i++)
                alert(divs[i].contents())
        }

    </script>
</head>
<body>

    <div id="myDiv">hi</div>
    <div id="div2">there</div>

</body>
</html>

Try it Regards

0 讨论(0)