Passing data to an Iframe

Using URL

From a text input box
          Within the link
 

In the page loaded into the Iframe

<script type="text/javascript">
<!--
function init(){
var dataPassed = '';
if (location.search.length > 0)
dataPassed = unescape(location.search.substring(1));
document.getElementById("display").innerHTML=dataPassed
}

// add onload="init()" to the opening BODY tag

// -->
</script>

<div id="display"></div>

In the parent page

<a href="#null" onclick="window.frames['iframe_name'].location='page1.htm?'+document.FormName.ElementName.value">Load into Iframe</a>

<a href="#null" onclick="window.frames['iframe_name'].location='page1.htm?Value within the link' ">Pass value to Iframe</a>

<iframe name="iframe_name"><iframe>


Referencing an Element

The following shows 4 examples of referencing elements in an iframe

Example 1.

Pass value of form element in parent page to form element in iframe page.

Coding on this page.

<form name=myform1>
<input type=text name=text1 value="Type Something Here">
</form>

<iframe name="iframe_name" src="iframe1.htm" width=600 height=300></iframe>

<a href="#null" onclick="window.frames['iframe_name'].document.f2.t2.value = document.f1.t1.value">Click to move into iframe textbox.</a>

and then Click Here.

Example 2.

To Change the image inside the iframe.Mouseme Here

<a href"#null" onmouseover="window.frames['iframe_name'].document.img1.src='yourimage2.gif' " onmouseout="window.frames['iframe_name'].document.img1.src='yourimage1.gif' "</a>

Example 3.

To reference a DIV in the iframe Click Here.

<a href="#null" onclick="window.frames['iframe_name'].document.getElementById('display').innerHTML='Hi There' ">Click Here</a>

Example 4.

To reference the body of the document in the iframe Click Here.

<a href="#null" onclick="window.frames['iframe_name'].document.body.innerHTML='New contents' ">Click Here</a>