Remote Scripting with IFRAME

Before you can exchange data between frames, you must first get access to the iframe's document object. There are 3 ways of doing this:

Three Methods

Method 1 - The iframe page can use it's own javascripts to transfer and place the data into the parent.

Method 2 - The iframe page can pass its document object as an argument to a function in the parent, thereby allowing the parent to retrieve data from the iframe.

Method 3 - Place an onload event handler in the iframe tag in the parent document (this page). This method does not work with Netscape 6.

We'll look at each of the methods below. For the sake of clarity, the iframes used in the following examples will be visible. In practice, they would be hidden using the technique discussed in the previous page.

Method 1

The parent page contains a form with a list of States. When you select a State and the results are returned in iframe name="repIframe", the iframe moves the data up to div id="results1" in this page using this script:

<script>
// - this is the script in the iframe results page
var reps = document.getElementById('state_reps').innerHTML;
parent.document.getElementById('results1').innerHTML = reps;
</script>

Method 2

Once again, we're going to use the form below to get a list of State Representatives. This time, however, when the results load in the iframe, this script will call the parent function showReps(doc) :

<script>
 // - this is the script in the iframe results page
 parent.showReps(document);
</script>

The showReps(doc) function in the parent (this page) uses the document reference to retrieve the table in the iframe and put it into div id="results2". The script looks like this:

<script>
 // - this is the script in this page
function showReps(doc){
 var x = doc.getElementById('state_reps').innerHTML;
 document.getElementById('results2').innerHTML = x;
}
</script>

Method 3

Method 3 uses the onload event handler to gain access to the document object of iframe name="repIframe3" source page using window.frames['repIframe3'].document.

This method will NOT work with Netscape 6.

Here's how this example works: place the event handler onload="getIframeDoc()" in the iframe tag. Next, choose a State from the select object in form name="list3". When the page loads in the iframe it will exectue the getIframeDoc function.

<iframe name="repIframe3" src="blank.html" onload="getIframeDoc()"></iframe>

<script>
 function getIframeDoc(){
  var iframeDoc = window.frames['repIframe3'].document;
  var sr = iframeDoc.getElementById('state_reps');
  if (sr){
   var reps3 = sr.innerHTML;
   document.getElementById('results3').innerHTML = reps3;
   }
 }
</script>