FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


JavaScript and iFrames





training_wheelz
POST FOR FriHost.com:

Subject: JavaScript and iFrames

Text:
Just wanted to share a little code with you hackers (that term really refers to any coder, not just those who use their skills for ill (thanks to the uninformed mass media for perverting the term)).

I spent a lot of time researching this issue before finding some clues which led me to the following solution.

source file: index.htm
contains a table with the following cell (one of several cells with iFrames):

Code:
<td><iframe name="source_frame" src="chapters.htm"></iframe>


One of the other table cells is:

Code:
<td><iframe name="banner_frame" src="banner.htm"></iframe>


"chapters.htm" contains a form as follows:

Code:
<form class="form_chapter" id="chapters_list">
   <select name="chapters" class="select" onchange="if(this.selectedIndex!=0)location=this.options[this.selectedIndex].value">
      <option id="option" selected="selected" value="javascript:void()">Select</option>
      <option value="javascript:chapter(1)">1</option>
      <option value="javascript:chapter(2)">2</option>
      <option value="javascript:chapter(3)">3</option>      
   </select>
</form>


"banner.htm" contains an image file as follows:

Code:
<img src="images/empty.gif" name="img_chapter" />


Now, how do we update the image in "banner.htm" with an image denoting the chapter number selected in the form in "chapters.htm"?

We have to "walk" through the Document Object Model (DOM) of the calling page ("index.htm") to identify the appropriate iFrame, it's page and then the image on that page.

The script which runs when, let us say, chapter one is selected in the form containing the ID "chapters" in the "select" tag is:

Code:
function chapter(x)
{
   parent.document.banner_frame.document.getElementById('img_chapter').src='images/' + x + '.jpg';
}


Here "x" represents the value "1", which was passed to the function by the form when option one was selected ("javascript:chapter(1)").

The function "walks" through the DOM of "index.htm" and identifies the target iFrame ("banner_frame"), then identifies the document contained therein ("document", which is "banner.htm"), finds the object with the ID "img_chapter" (which is the html image tag) and changes its source from the original "empty.gif" to "1.jpg" (which is the image identifying the chapter number).

You can likewise use this "walking" of the DOM to change the webpage contained in the iFrame, or the text displayed on the target webpage already contained in the target iFrame. There are a host of other possibilities too.

Hope you all found this usefull.

Happy coding.
bladesage
This is all trivial information. How is that supposed to help? It's quite simple info too. I can make my awesome page update one frame from the other, and it seems that that is what you're trying to teach.

Why not post something more useful, or better yet, post this in the tutorials forum?
Related topics
Javascript Pop-up
Changing javascript caption?
Javascript include file..?
JAVASCRIPT FUNCTION- ONCLICK HELP!!
Drag images (Javascript)
PB PHP, Iframe and Javascript
Clock-javascript
javascript: needed script for displaying window
Handling Css using Javascript
Navigation Script (javascript) Help Please!
resolution detection with javascript
A Useful Javascript
Tutorial: Image Rollovers w/ Javascript
Save webpage source into javascript variable
Reply to topic    Frihost Forum Index -> Scripting -> Others

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.