The Trouble with IFrames and Firebug
If you use the Firebug console a lot, like me, you’ve probably run into issues when you’re interacting with pages that use IFrames. The console attaches to the top window, so any code you run via the command line is run only in that context. You could manually drill down through any frames on the page like this:
var someElement = document.getElementById('someFrame').document.getElementById('someElement');
That’s pretty ugly, and if you’re planning to actually use the code you’re writing in the console you’ll need to run through it all and remove all the code that drills down through the frames. I’ll pass.
Attaching to Frames with cd(window)
Firebug has a built in command that can attach the console to a different window:
cd(document.getElementById("someFrame").contentWindow); // Now, all script will be run in the context of that frame. var someElement = document.getElementById('someElement'); cd(top); // Attach the console back to the top window.
That’s a lot better than manually drilling down through any frames, plus my code isn’t going to be littered with useless frame references this way. Of course there are still a couple other problems:
- You have to type that big cd(…) line every time you want to switch contexts.
- You need to remember the name or index of the frame you want to attach to.
- If you have multiple levels of nested frames (…don’t ask) it can be tedious and time consuming to drill down through them.
The solution I came up with was to extend Firebug by adding a button that would allow the user to visually select a frame on the page to attach the console to. Here’s what it looks like in action:
I think I could extend this further to also include a “Frames” tab that displays a graphic representation of all the frames on a page, indicates which one the console is currently attached to, and allows inspector style navigation to each frame in the HTML panel.