iFrames and referencing objects on the rest of the Page

  • Thread starter Thread starter John
  • Start date Start date
J

John

Hi all,

I have a page which contains a few usercontrols inserted into placeholders
on one main page. Inside one of these usercontrols is an iFrame tag which
loads a page. If a user clicks on something within this page, I need to
update a control in one of the other usercontrols elsewhere in the main
page.

How do I do this?

Regards
John.
 
You can communicate between the main window and its iframe by using the
parent object (parent.window.document....) in the iframe and the
contentWindow property of the iframe for the main window.

For instance, theCode Snippet A is the window hosting the iframe.

CODE SNIPPET A
-----------------------------------------------------
<html>
<script>
function SayHello ()
{
alert ('Hello.');
}
</script>
<body>
<iframe src="CodeSnippetB..html"></iframe>
</body>
</html>


Here is example code for the iframe, Code Snippet B:

<html>

<script>
function TalkToParent ()
{
// This will invoke the SayHello method in the parent document.
Though, this
// function coud just as easily have invoked a function to edit
element's on the
// parent page or directly modify the element by using
// parent.window.document.getElementById

parent.window.SayHello();
}
</script>

<body>
<input type="button" onClick="TalkToParent();" />
</body>
</html>


In summary the following are key objects and methods to use for
communication:
* parent.window.document
* getElementById
* contentWindow

Good luck,

Boyd
 
Back
Top