IFrame Exchange Data

[Total: 0    Average: 0/5]

This example shows how to have 2 html files use iframes to interact and exchange data.

Body Code:

<!--
1. This code goes inside page one.html

<script>
function doOne()
{
document.if1.document.f1.t1.value=document.f1.t1.value;
}
function doTwo()
{
document.if1.document.one.src="http://www.js-examples.com/js/pic3.gif";
}
</script>
</head>

<body>

This page contains an iframe:
My data: <form name=f1><input type=text name=t1 value="new data"></form>
<BR>
<a href="javascript:doOne()">Click to move the form data into the iframe form.</a>
<BR>
<a href="javascript:doTwo()">Click here to change the image inside the iframe.</a>
<HR>
<iframe name=if1 src="inside_iframe.html" width=400 height=400>
<HR>

-->



<!--
2. This code goes inside second file (inside_iframe.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page in an iframe</title>
</head>
<body>
This loads default with pic1.gif
<BR>
(This page should be in an iframe)
<BR>
<img src=http://www.js-examples.com/js/pic1.gif name=one>
<BR>
<form name=f1>
<input type=text name=t1 value="defalut">
</form>
</body>
</html>

-->

Times Viewed: 4

Leave a Reply

Your email address will not be published. Required fields are marked *