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

Posted on 2006-11-13
Last Modified: 2010-05-18

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"?
Question by:emoshag
  • 5
  • 4
LVL 54

Accepted Solution

b0lsc0tt earned 400 total points
ID: 17934620

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.


Author Comment

ID: 17934665

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?
LVL 54

Expert Comment

ID: 17934758
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.

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.


Author Comment

ID: 17934888
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?

Author Comment

ID: 17938726
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....
LVL 54

Expert Comment

ID: 17942918
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?

LVL 54

Expert Comment

ID: 17942936
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.


Author Comment

ID: 17947197
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.
LVL 54

Expert Comment

ID: 17948637
I'm glad that I could help you.  Thank you for the grade, the points and the fun question.


Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (, we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

827 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question