Accessing the document object of a frame with JavaScript

javascript html dom frame
Brigand picture Brigand · Feb 18, 2013 · Viewed 56.4k times · Source

I'm testing on this page, and I'm not sure what I'm missing.

// Two frames on the page
> document.getElementsByTagName("frame").length
2

// Same domain, so no security restrictions
> document.getElementsByTagName("frame")[0].src
"http://www.quackit.com/html/templates/frames/menu_1.html"
> window.location.href
"http://www.quackit.com/html/templates/frames/frames_example_1.html"

// Can't access the document
> document.getElementsByTagName("frame")[0].document
undefined

It seems like this should work, so what's the problem? It needs to work in IE8, but I'm also testing in Chrome (newest stable).

Answer

Ian picture Ian · Feb 18, 2013

The all-around way to getting a frame's contents is with something like this:

var theFrame = document.getElementsByTagName("frame")[0];
var theFrameDocument = theFrame.contentDocument || theFrame.contentWindow.document;
var button = theFrameDocument.getElementById("mybutton");

However, it is possible to get a <frame>'s document by using its name, like:

window.frames["frame_name"].document

if the HTML were:

<frame name="frame_name">...</frame>

Related questions

How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
How to make JavaScript execute after page load?

I'm executing an external script, using a <script> inside <head>. Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like to execute some JavaScript …

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More