Solved

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

Posted on 2006-11-13
9
459 Views
Last Modified: 2010-05-18
Hello,

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"?
0
Comment
Question by:emoshag
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 400 total points
ID: 17934620
emoshag,

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

  parent.frames("rightframe")

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.

b0lsc0tt
0
 

Author Comment

by:emoshag
ID: 17934665
Hmmmm...

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

Expert Comment

by:b0lsc0tt
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.

bol
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:emoshag
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">
<head>
<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>
</head>
<body style="">
<div id="MainTable">
  <iframe src="open2.html"
              name="frameright"
            scrolling="No"
            frameborder="no"
            id="frameright"
            style="position:absolute; left:423px; top:283px; width:261px; height:407px">&nbsp;</iframe>
  <iframe src="open1.html"
              name="frameleft"
              scrolling="No"
              frameborder="no"
              id="frameleft"
              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>
</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" />
</map>

</body>
</html>


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?
0
 

Author Comment

by:emoshag
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....
0
 
LVL 54

Expert Comment

by:b0lsc0tt
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?

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
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.

bol
0
 

Author Comment

by:emoshag
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.
0
 
LVL 54

Expert Comment

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

bol
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

In my daily work (mainly using ASP.net), 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 …
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…
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…

739 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