Extend document DOM for iframes

Question

I already have a set of functions I use to extend the document (i.e. bind/unbind). So I can do stuff like: document.bind('load',someAction,{})

But it doesn't work if I do: $('some_iframe').contentWindow.document.bind(...) And apparently, $('some_iframe').contentWindow.document.prototype doesn't exist.

EDIT: Here is the code breakdown:

//the eggplant library
eggp = {
    extend: function(dest, source){
        for(var prop in source)
            dest.prototype[prop] = source[prop];
        return dest;
    },
    //other functions below...  
    bind{},  
    unbind{}
}
//extend the DOM
eggp.extend(Document, eggp);
//extending the iframe document DOESN'T WORK
eggp.extend(someiframe.contentWindow.document, eggp);

I've checked to see if someiframe.contentWindow.document is undefined, but it returns object HTMLDocument

Answer 1

How are you extending document initially? Don't you have to extend HTMLDocument.prototype instead of document.prototype, since the latter isn't a constructor?

Meaning you're extending the wrong thing in the iframe? If I'm wrong, please tell me how you are extending it initially.

Answer 2

I am guessing "some_iframe" is an ID. To select an object by ID with jQuery you need to use #, just like in CSS.

So it should be $('#some_iframe').eq(0).contentWindow.document.prototype.

If you don't use # that is used to select by TAG name.

So $('p') would select all <p> tags on the page.

Answer 3

You can't do this, at least not in a cross-browser way. Ideally you would extend the prototype of the HTMLDocument object, but of course, IE does not have this object in the first place. As a workaround, you could create a function that creates an IFrame and automatically extends its document object, and exclusively use that function to create your IFrames, but if the frames are already on the page, there isn't much you can do about it short of looping through each one and extending it manually.

$('iframe').each(function() {
    MyLibrary.extend(this.contentWindow.document, MyDocumentPrototype);
});

(Assuming jQuery, insert your own library code to get all IFrames here.)

In general, though, extending built-in DOM objects is a bad idea, so you should come up with another way to do what you want.