Help on opening multiple iframe windows

**Kaze** · 08-26-2005, 07:16 AM

okay what I am trying to do is make one link open up 3 different pages in 3 different iframes, is this possable?

my other idea for this is, is there a way to have one link open up one page in an iframe and then that page auto loads the other two pages in the other two iframes.

if any of the two is possable or you have your own suggestion for that, that would be awesome.

thanks for all your help

**jscheuer1** · 08-26-2005, 01:14 PM

Both are possible. There are several ways in javascript to change the page displayed in an iframe. There is one in html. Combining any 3 - the same or different one(s) may be used 3 or more times in javascript, the html method can only be used once at a given time but, can be combined with javascript method(s), should be able to create the effect you want. Here is one example:

Code:

<a href="page1.htm" target="frame1" onclick="window.frame2.location.href='page2.htm';window.frame3.location.href='page3.htm';return true;">Link Text</a>

Now, all you need are 3 iframes and the three pages. Each iframe must be named. In this example the names are frame1, frame2 and frame3, ex:

HTML Code:

<iframe name="frame1" src=""></iframe>

You can add whatever other attributes you like to the iframes.

**Kaze** · 08-26-2005, 07:18 PM

thanks that worked ^^

**Jay Dog** · 02-06-2013, 02:29 PM

Hi,

I am struggling with this too.

I have this:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><style type="text/css">
<!--
HTML{
scrollbar-face-color:#75EA00;
scrollbar-arrow-color:brown;
scrollbar-track-color:#EEEEEE;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
-->
</style>
</head>

<body>





<iframe src="screens.html" style="border:0px #FFFFFF none;" name="screen" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="245px" width="330px"></iframe>

<iframe src="menu.html" style="border:0px #FFFFFF none;" name="menu" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="245px" width="330px"></iframe>
<br />
<iframe src="text.html" style="border:0px #FFFFFF none;" name="text" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="245px" width="660px"></iframe>

</body>
</html>

where I want three Iframes; Screens, Menu and Text.

You click on a link in Menu and BOTH the screen AND text change.

So far I have managed to get it to work with Menu actually being in the original webpage but when it's an Iframe it doesn't work. Menu needs to be an Iframe as that's where the information and links to videos will be kept.

The code for Menu is this:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table</title>
<style> 
<!--
HTML{
scrollbar-face-color:#f4ebd9; 
scrollbar-arrow-color:790e08;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
-->
</style></head>

<body>




<div style="text-align: left; width: 234px; float: left; height: 60px;">
  <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;">
  
  <a href="****.htm" target="screen" onclick="window.text.location.href='textenglish.htm';window.frame3.location.href='page3.htm';return true;">Link Text</a>
  
  <a href="tom.html" target="screen"><img src="whitesmall.jpg" width="68" height="51" border="0" /></a></div>
<div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">
  <strong>White Rabbit</strong>
  Year 7 Football Team win against Top Valley <a href="textwhite.html" target="text">(text) </a></div>
</div>

<div style="text-align: left; width: 234px; float: left; height: 60px;">
  <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="****.html" target="screen"><img src="kittinsmall.jpg" width="68" height="51" border="0" /></a></div>
<div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Miss Kittin Year 8 Basketball Girls win against Arnold Hill <a href="textmiss.html" target="text">(text)</a></div>
</div>
<div style="text-align: left; width: 234px; float: left; height: 60px;">
  <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="harry.html" target="screen"><img src="taylorsmall.jpg" width="68" height="51" border="0" /></a></div>
<div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Taylor Swift</div>
</div>
<div style="text-align: left; width: 234px; float: left; height: 60px;">
  <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="harry.html" target="screen"><img src="taylorsmall.jpg" width="68" height="51" border="0" /></a></div>
<div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Taylor Swift</div>
</div>
<div style="text-align: left; width: 234px; float: left; height: 60px;">
  <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="harry.html" target="screen"><img src="taylorsmall.jpg" width="68" height="51" border="0" /></a></div>
<div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Taylor Swift</div>
</div>
<div style="text-align: left; width: 234px; float: left; height: 60px;">
  <div style="text-align: left; width: 70px; float: left; height: 60px; border: #ffffff 1px solid;"><a href="harry.html" target="screen"><img src="taylorsmall.jpg" width="68" height="51" border="0" /></a></div>
<div style="text-align: left; width: 160px; float: left; height: 60px; border: #ffffff 1px solid;">Taylor Swift</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
  <!-- MENU-LOCATION=NONE -->
</p>
</body>
</html>

Demo:

http://www.bigwood.nottingham.sch.uk/news-test

**jscheuer1** · 02-06-2013, 04:57 PM

To get the onclick part to work from within an iframe, you must use parent. or top., ex (from your post, addition highlighted):

Code:

<a href="****.htm" target="screen" onclick="parent.window.text.location.href='textenglish.htm'; . . .

Adding frames. might be good or required, at least for some browsers:

Code:

<a href="****.htm" target="screen" onclick="parent.window.frames.text.location.href='textenglish.htm'; . . .

BTW, using either parent or top when it's all on the same page will still work as long as that page isn't in an iframe or frame.

The difference between parent (looks up one level) and top (looks to the uppermost level in the window), is just that, where it looks. If as appears in this case you only have two levels, top and the iframes, they're the same here. If there's only one level it's the page itself regardless of what you use. If there are intermediate levels one can use parent.parent. or parent.parent.parent. as needed.

The browser cache may need to be cleared and/or the page refreshed to see changes.

**Jay Dog** · 02-07-2013, 10:02 AM

Hi, thanks, I'll have a look at it when I'm back at work.

**absolute beginner** · 05-12-2013, 02:36 PM

I don't know if you can help me with a similar thing. I was hoping to try figure it out myself, but after spending 10 hours a day for the last few days trying everything I can find on the web, I think it's time to admit defeat and ask for help. When it comes to code, I'm pretty much a beginner, I'm using iWeb for authoring so am limited to snippets, but can edit the page post publishing if need be.

My link is on my main page which has 3 frames.

As I say I've tried so many things I don't think it's worth posting where I'm up to because it's probably all wrong, but this is what I have working so far when using a link to target one frame.

Code:

<div style="width:270px; font-family: Arial; font-size: 12px; color:#000000;"><style type="text/css">

a:link {color: #4c4c4c; text-decoration: none;margin-left: 50px}
a:visited {color: #4c4c4c; text-decoration: none;}
a:hover {color: #0080ff; text-decoration: none;}
</style>

<a href="page1.html" target="frame1">Link</a>
</div>

Inserting:

Code:

onclick="window.frame(n).location.href='page(n).html';return true;"

doesn't do anything more than open page1 in frame1

**jscheuer1** · 05-12-2013, 02:52 PM

That should be like:

Code:

onclick="window.frames[1].location.href = 'somepage.htm'; return true;"

which will target the second iframe on a page (assuming it has at least two) and put somepage.htm in it.

**absolute beginner** · 05-12-2013, 07:26 PM

Mmmm, I thought I'd tried all combinations along those lines.

For the avoidance of doubt, if my (let's say 2) frames are:

Code:

<iframe id="frame_1" name="frame_1" src="http://mydomain.com/poster_1.html" frameborder="0" width="286" height="388" scrolling="no" allowtransparency="true"></iframe>

and

Code:

<iframe id="frame_2" name="frame_2" src="http://mydomain.com/poster_2.html" frameborder="0" width="400" height="100" scrolling="no" allowtransparency="true"></iframe>

and the new pages I want to load into my two frames upon clicking the link 'Link' are:

Code:

http://mydomain.com/new_page_1.html

and

Code:

http://mydomain.com/new_page_2.html

what should replace (*) in my snippet below:

Code:

<div style="width:270px; font-family: Arial; font-size: 12px; color:#000000;"><style type="text/css">

a:link {color: #4c4c4c; text-decoration: none;margin-left: 50px}
a:visited {color: #4c4c4c; text-decoration: none;}
a:hover {color: #0080ff; text-decoration: none;}
</style>

<a href="new_page_1.html" target="frame_1" onclick="(*).href='new_page_2.html'; return true;">Link</a>
</div>

Thank you very much for your assistance.

**jscheuer1** · 05-12-2013, 09:48 PM

Code:

<a href="new_page_1.html" target="frame_1" onclick="window.frames.frame_2.location.href='new_page_2.html'; return true;">Link</a>

You can do that, or you could do this instead:

Code:

<a href="new_page_1.html" target="frame_1" onclick="window.frames[1].location.href='new_page_2.html'; return true;">Link</a>

Or this:

Code:

<a href="new_page_1.html" target="frame_1" onclick="window.open('new_page_2.html', 'frame_2'); return true;">Link</a>

They might not all work in all browsers. The most reliable is the middle one, the one with the [1] in it. But, as I said before, there have to be at least 2 iframes on the page and the one you want for new_page_2.html has to be the second one. It looks like that's what you have/want. Some older Firefox browsers might have a problem with the first one. And some browsers, if their security settings are really high, might block the last one, but I doubt that.

Only browsers with javascript missing or disabled will block the middle one, and the other two won't work then either.