Comments on: Help me get a handle on my frames!

Question: Help me get a handle on my frames!

jferg — Fri, 31 Oct 2008 20:00:16 -0800

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?

By: Pinback

Pinback — Fri, 31 Oct 2008 22:48:02 -0800

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...)

By: qvtqht

qvtqht — Fri, 31 Oct 2008 23:01:30 -0800

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.

By: jferg

jferg — Sat, 01 Nov 2008 06:12:06 -0800

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.

By: ook

ook — Sat, 01 Nov 2008 09:07:02 -0800

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.

By: jferg

jferg — Sat, 01 Nov 2008 10:50:31 -0800

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.

By: ook

ook — Sat, 01 Nov 2008 14:34:49 -0800

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";

By: jferg

jferg — Mon, 03 Nov 2008 07:44:36 -0800

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.