访问jquery对话框内的iframe内的元素

Question

I need to "load a page" inside of a page that the user is already on instead of redirecting them to that new page. It is my understanding that an iframe is the best way of doing this. I like jQuery's dialog box as a wrapper for this iframe content, as it looks nice and allows the user to reposition the popup as well as close it easily.

I'm having trouble accessing the elements on this iframe however. I want to be able to take data from the user's original window and add it to the new iframe's input elements, but I can't seem to find the syntax for doing this.

There is something in the code for the iframe page that overwrites jQuery's use of $ , so I can't use $('#foo').text('bar') . I've been trying to find the correct syntax in pure javascript - like

var a = window.frames["e_frame"].document.getElementById ("title");
a.text = 'foobar';

where e_frame is the id I've given to my iframe, and title is the id of an element that loads in the iframe. I can see these both clearly in the developer console, but I cannot access them and I'm not sure what I'm doing wrong. Typing in the command above in the console gives me this error:

VM364:1 Uncaught TypeError: Cannot read property 'document' of undefined
    at <anonymous>:1:28

and typing window.frames into the console to debug myself gives me way too many lines to go through since I'm not sure what I'm looking for.

Any ideas?

Answer 1

Have you tried this ?

var iframe = document.getElementById("e_frame");
var iframe_contents = iframe.contentDocument.getElementById('title');