Here’s a question that I see pop up quite frequently on newsgroups: How do I access content across frames or an iFrame using JavaScript code? It’s actually quite easy once you understand how the windowing mechanism in the browser works.

Imagine you have two pages – one that holds an iFrame and another that holds the content for the iFrame. Both the host page and the iFrame contain a <div id=”message”> tag that is used to write some content into the other frame.

Here’s the top level page:      

    <div class="errordisplay" id="message">
       original
   </div>


   <iframe src="FramesPage2.aspx" id="frame1" height="400">
   </iframe>    
   
    
   <script type="text/javascript">
       window.onload = function() {
           var frame = document.getElementById("frame1");
           var msg = frame.contentDocument.getElementById("message");
           msg.innerHTML = "Hello World from Frame Page 1";
       };    
   </script>

And here the iFrames source page that gets loaded into the iFrame:

<div class="errordisplay" id="message">
original
</div>

<script type="text/javascript">        
        var msg = window.parent.document.getElementById("message");
        msg.innerHTML = "Updated from iFrame";    
</script>

The above works both with iFrames, Frames or separate windows that were loaded from the current window.

From the top level window that contains the iFrame you start by getting a reference to the iFrame by using plain old getElementById to select the iFrame by Id. Alternately you can also access the frame via window.frames[0] (or appropriate numeric index). Once the iFrame is selected you can use the contentDocument property to access the child frame content. From there you can access document methods as you normally would – in this case by using getElementById() and then assigning some HTML to the display <div> tag in the child frame.

In the child frame to reference back to the parent frame is easier yet: You can use the window.parent property to get a reference to the parent frame. You can then simply reference the document and continue on accessing elements in the parent document.

Cross Frame Functions

The previous code is  - ahem - functional, but realistically accessing cross frame elements is probably not something you should do extensively. When you control elements in another browser window you are stuck with directly coding against the DOM – using libraries like jQuery for example isn’t possible since tools like it work against content in the current window.

If your interaction is any more complex that say grabbing or setting a single value , it’s probably better to create functions in the target frame and call these functions across the frame border rather than the individual DOM commands individually. That way you can encapsulate the functionality in the child page, which makes it easier to code and test the functionality, and it also allows you to use any libraries the way you normally would. You can then simply call the function from the parent page to perform more complex tasks indirectly.

To call a function across frames is fairly easy. Assume that the iFrame code I showed earlier also includes a function called showMessage in script code that updates it’s internal message <div> tag like this:

    <script type="text/javascript">
            function showMessage(m) {
                document.getElementById("message").innerHTML = m;
            }
    </script>

To call this function from the parent frame you can use a couple of approaches. The easiest is to use the frames collection:

<script type="text/javascript">
    window.onload = function() {
        window.frames[0].showMessage("Hello from Main Page in iFrame");
    };    
</script>  

The individual frame is essentially a reference to the window object in the child frame and all global JavaScript functions are functions off the window object. So you can directly call the function of the frame. Easy. The main issue with this that you need to know (or find) the frame index first.

You can also get it through the frame DOM element in the parent page and use its contentWindow property to get at the child window:

<script type="text/javascript">
    window.onload = function() {
        var frame = document.getElementById("frame1");
        var win =  frame.contentWindow;
        win.showMessage("Hello from Main Page in iFrame");
    };    
</script>

and this works as well.

With the abillity to call functions it’s much easier to offload processing to other frames more efficiently which allows for creation of self contained modules that let you interact with only a few small interface points. For example, you can create window objects that load content dynamically and yet act independently  and without interfering with each other.