Help me get a handle on my frames!

October 31, 2008 8:00 PM

HTML/DOM/JavaScriptfilter: Help me get a handle on my frames! I'm by no means a javascript expert, though I can bash my way around in it when necessary - but I just can't figure out how to get a handle on the frames in my document via the DOM.

I'm trying to wrapper a pre-written app that I host (but have no control over and can't modify) in an IFRAME (for a couple of reasons), and want to register event handlers programatically on the frames of the app (to detect when the user is active in the app). The resultant page looks somewhat like this. I'm trying to register event handlers on the nav and view frames from JavaScript in the top-level document, but cannot figure out how to traverse the DOM to get an object for the documents within the frames. I can't even use getElementById, because there are no IDs defined on the frames within the app. (But I'd rather have a generic solution that will work no matter what the frames are named.) FireBug is providing me with no assistance on this one, either. Can any of you MeFi HTML DOM wizards out there help?

posted by jferg to Computers & Internet (7 answers total)

Iframes are a bit odd because, being frames, they're more children of the window than of the parent document. IIRC, if you've got no IDs, you need to do something along the lines of window.frames get an array of all the frames/iframes, then dig through the array to find the right ones (hopefully your app doesn't create them in a different order in each page!). Once you've found the right ones in the array, it's then a matter of using something like window.frames[x].document.property to access them (e.g. window.frames[1].document.title returns the first iframe's title).

(Don't quote me on that, though, because the last time I did this iframes were a new invention, and the whole DOM thing was very immature...)
posted by Pinback at 10:48 PM on October 31, 2008

If the iframe page is coming from a different domain than the parent page, you won't be able to access or manipulate it with javascript due to cross-domain security.
posted by qvtqht at 11:01 PM on October 31, 2008

Response by poster: window.frames only seems to contain the iframe, not the frames in the frameset contained _in_ the iframe.

And qvtqht, the app is hosted from the same host/domain as the parent page - I just have no control over the code for the app.
posted by jferg at 6:12 AM on November 1, 2008

If you're trying to get frames within frames, then just keep travelling down the object chain until you have the one you want: window.frames[x].frames[x]... and so on. IDs are less fragile than indexes, but sometimes you just have to work with what you have.
posted by ook at 9:07 AM on November 1, 2008

Response by poster: ook: That's what I thought too! But when I dig around in the DOM using FireBug, window.frames == window.frames.frames.frames.frames.frames.frames ad nauseum. That's the part I don't get.
posted by jferg at 10:50 AM on November 1, 2008

Best answer: You have to identify the specific frames you're after (by treating each 'frames' as an array).

In your test page:
window.frames[0] == frameset.html
window.frames[0].frames[0] == nav.html
window.frames[0].frames[1] == view.html
window.frames[0].frames[0].document.body.innerHTML == "This is the view frame!\n";
posted by ook at 2:34 PM on November 1, 2008

Response by poster: ook: Thank you! Apparently firebug's DOM inspector is just plain weird, and was showing me something other than what I was expecting in the case of the frames array.
posted by jferg at 7:44 AM on November 3, 2008