Go Premium for a chance to win a PS4. Enter to Win


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

Posted on 2006-11-13
Medium Priority
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 1600 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.

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.


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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses

916 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