Multiple iFrames: Linking from iFrame "1" to iFrame "2"


I am trying to accomplish something through Javascript for use with my iFrames that I cannot seem to figure out.

The layout of my main page is constructed this way:

Navigation Menu on top.
iFrame on left called "frameleft"
iFrame on right called "frameright"

Now, I can get multiple pages to load correctly in the proper iFrames with the Navigation Bar, but I need to also load pages in "frameright"
from "frameleft".

I have searched the forums and I know I need to be using a JavaScript function to reference the "rightframe" from the parent document.... but I cannot fugure out how I am supposed to do this.

In other words.... how do I get a link from a page contained in the "leftframe" to open a page in the "rightframe"?
Who is Participating?

Improve company productivity with a Business Account.Sign Up

b0lsc0ttConnect With a Mentor IT ManagerCommented:

The basic way to have a link open in a specific window or frame doesn't involve javascript.  It uses the target attribute in the anchor tag.  For example ...

  <a href="page.htm" target="rightframe">Link</a>

If you need to refer to another frame then you can use parent or top and then frames("framename").  Something like this ...


Using top instead of parent is helpful if there are multiple levels.  The frames need to be from the same domain for a script to read or change content.

Let me know if you have any questions or need more information.

emoshagAuthor Commented:

I tried that... and it loaded the correct page... but in a _blank window.

I looked into it a bit more and it seems like people are writing functions to 'point' to the top level and then down two the correct iFrame.

I am looking at code like this:

function change(page) {

      var loc = new String(document.location);
      var newLoc = loc.substring(0,loc.indexOf('new.php'));

      if(newLoc) {
            document.location.href = '/index.php?' + page;
      } else {

            if(page != 'old') {

                  var page1 = page + '.html';
                  var page2 = page + '2' + '.html';

            } else {

                  var page1 = page + '.php';
                  var page2 = page + '2' + '.php';


            top.frameleft.location.href = page1;
            top.frameright.location.href = page2;


I got this from a site that I see using the same concept I am trying correctly.  Does this make any sense at all or am I completely lost?
b0lsc0ttIT ManagerCommented:
That javascript will change 2 pages.  It doesn't sound like you want to do that in this case.  Are the frames all the same domain (i.e. part of the same site)?  I may have made a mistake when I provided my example.  I thought you named the right frame "rightframe" but it looks like it may be "frameright".  Is it done with a name attribute in the iframe tag?  Correct the target and make sure the iframe has a name attribute that matches and is unique.

If you still have a problem please provide the html of one of the links and the basic code for the main page to show the iframe tags, etc.

Let me know if you have a question.

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

emoshagAuthor Commented:
I corrected the frame names but still have a problem....

Here is my relevent code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<title>HIGHSPEEDCHANGER v1.02</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<link href="HighSpeedChanger.css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="HighSpeedChanger.js"></script>
<body style="">
<div id="MainTable">
  <iframe src="open2.html"
            style="position:absolute; left:423px; top:283px; width:261px; height:407px">&nbsp;</iframe>
  <iframe src="open1.html"
              style="position:absolute; left:17px; top:283px; width:377px; height:407px;">&nbsp;</iframe>
  <div id="Head_"> <img src="images/Head.jpg" alt="" width="700" height="283" border="0" usemap="#NavMap" id="Head" />  </div>
  <div id="LeftBorder_"> <img id="LeftBorder" src="images/LeftBorder.jpg" width="17" height="407" alt="" /> </div>
  <div id="CenterBorder_"> <img id="CenterBorder" src="images/CenterBorder.jpg" width="29" height="407" alt="" /> </div>
  <div id="RightBorder_"> <img id="RightBorder" src="images/RightBorder.jpg" width="16" height="407" alt="" /> </div>
  <div id="BottomBorder_"> <img id="BottomBorder" src="images/BottomBorder.jpg" width="700" height="10" alt="" /> </div>

<map name="NavMap" id="NavMap">
        <area shape="rect" coords="312,212,362,234" href="#" alt="NEWS" onclick="Lvl_targetIframe('','frameleft','news1.html');Lvl_targetIframe('','frameright','news2.html');return document.MM_returnValue" />
        <area shape="rect" coords="396,214,495,235" href="#" alt="BIOGRAPHY" onclick="Lvl_targetIframe('','frameleft','biography1.html');Lvl_targetIframe('','frameright','biography2.html');return document.MM_returnValue" />
        <area shape="rect" coords="522,214,609,234" href="#" alt="RELEASES" onclick="Lvl_targetIframe('','frameleft','releases1.html');Lvl_targetIframe('','frameright','releases2.html');return document.MM_returnValue" />
        <area shape="rect" coords="625,213,686,235" href="#" alt="SHOWS" onclick="Lvl_targetIframe('','frameleft','shows1.html');Lvl_targetIframe('','frameright','shows2.html');return document.MM_returnValue" />
        <area shape="rect" coords="342,246,470,269" href="#" alt="AUDIO/VISUAL" onclick="Lvl_targetIframe('','frameleft','media1.html');Lvl_targetIframe('','frameright','media2.html');return document.MM_returnValue" />
        <area shape="rect" coords="508,243,557,266" href="#" alt="GEAR" onclick="Lvl_targetIframe('','frameleft','gear1.html');Lvl_targetIframe('','frameright','gear2.html');return document.MM_returnValue" />
        <area shape="rect" coords="595,244,650,266" href="#" alt="LINKS" onclick="Lvl_targetIframe('','frameleft','links1.html');Lvl_targetIframe('','frameright','links2.html');return document.MM_returnValue" />


And the Javascript file:

function Lvl_targetIframe(f,i,u){ //v1.0 4LevelWebs
 var b=(!f)?i:f+".frames['"+i+"']",o=(eval("opener&&opener.parent."+b))?"opener.":'';
 var el=eval(o+"parent."+b);el.location=u;document.MM_returnValue=false;

Any ideas?
emoshagAuthor Commented:
I could maybe try to get around it by making one frame on the main page and then using 2 frames on the page that loads on the child... but I want to try to avoid that.

I am also increasing the points on this because this issue is making me want to pull my hair out....
b0lsc0ttIT ManagerCommented:
Thanks for the code and for increasing the points.  I hope it hasn't cost too much hair. :D

I may have misunderstood.  Where is the link you are clicking (i.e. Navigation Menu on top, link on page in frameright)?  Which page should change?  I have understood that people would click on a link on the page in frameright and the page in frameleft should change.  It sounded like the navigation menu will change both frames and is working fine.  Please verify or correct me.

With the corrected frame names what is happening?  Is it still opening in a new window, opening in just one frame, or error/nothing?

b0lsc0ttIT ManagerCommented:
By the way, if I was correct then it is the code in frameright that I want to see.  Those would be the links that are being clicked and not opening in frameleft.  You should not need to use the function that the navigation menu uses to do this.  Just target and a normal href are enough, no onclick event is necessary.

This is in case I was right about the problem.

emoshagAuthor Commented:
Actually, I am not that bright... it would seem.

I had not updated all the subsequent pages I am trying to load... and after doing so... I can see that the code works fine.  I am not sure if it was OK to begin with, but you helped me see that I was trying to load pages that looked identical... and well,   its hard to notice a difference when you do it that way.  :)

Stare at something long enough and the obvious seems to disappear.
b0lsc0ttIT ManagerCommented:
I'm glad that I could help you.  Thank you for the grade, the points and the fun question.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.