Remote Scripting - Moving Data From an iframe to the Parent

for IE 5+ and Netscape 6+

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>

Find Your State Representative - 107th Congress

<form name="list" action="" method="get" target="repIframe">

Choose a State New Jersey Pennsylvania

</form>

<div id="results1"> </div>
This is iframe name="repIframe"

 

---

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>

Find Your State Representative - 107th Congress

<form name="list2" action="" method="get" target="repIframe2">

Choose a State New Jersey Pennsylvania

</form>

<div id="results2"> </div>
This is iframe name="repIframe2"

 

---

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>

Find Your State Representative - 107th Congress

<form name="list3" action="" method="get" target="repIframe3">

Choose a State New Jersey Pennsylvania

</form>

<div id="results3"> </div>
This is iframe name="repIframe3"

 

 

Moving Data as innerHTML

You may have noticed that both examples transfered data as 'innerHTML' which is not at all DOM compliant. So why 'innerHTML' and not 'cloneNode()' and 'appendChild'? Because both IE and Netscape 6+ support the use of 'innerHTML' but only Netscape 6+ allows you to transfer data across frames at the object level. The next section tests this out.

Moving Objects Across Frames >>

---

PXL8 2003