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
Comment Utility

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

Comment Utility

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

Comment Utility
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.


Author Comment

Comment Utility
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?
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.


Author Comment

Comment Utility
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

Comment Utility
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

Comment Utility
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

Comment Utility
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

Comment Utility
I'm glad that I could help you.  Thank you for the grade, the points and the fun question.


Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now