In IE, when binding to the 'load' event of an IFRAME, this.contentDocument is undefined

Ok, bear with me folks, the setup on this one is long.

I have a simple page. It loads an iframe. Inside that iframe is a form. I want the form inside the iframe to interact with the parent page via jQuery.

This works correctly in Firefox, Chrome, and Safari. See for yourself here:

http://dl.dropbox.com/u/58785/iframe-example/index.htm

However, in Internet Explorer 6/7/8/9, it does not work. The load event fires, but jQuery can开发者_运维问答not get a handle on elements inside the iframe.

I'm using the second 'context' argument of the jQuery function to set the context of the selector, like this: var form = $('#myform'), this.contentDocument)

Here's what is batty. Using the F12 Developer Tools in IE9, I can set a breakpoint in my JavaScript and look at how IE is evaluating the JavaScript. If I hover over this, I can see that it does have a contentDocument property. BUT, if I hover over this.contentDocument, it tells me it's undefined.

Because it's undefined, the jQuery selector returns no elements. Again, this is only in IE. And the IFRAME is on the same domain, so it's not a same-origin issue.

Any pointers?

---

Not to trample on Roatin's answer, but this issue can also be fixed by specifying a DOCTYPE declaraction. Internet Explorer 8 and over require it for contentDocument. Otherwise, as he said, contentWindow can be used (for earlier versions of IE, too). See the information at W3Schools.