Help on opening multiple iframe windows [Archive]

View Full Version : 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:

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

<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, 03:29 PM

Hi,

I am struggling with this too.

I have this:

<!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">

</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:

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

</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> </p>
<p> </p>
<p>

</p>
</body>
</html>

Demo:

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

jscheuer1

02-06-2013, 05: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):

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

<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, 11: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.

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

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:

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:

<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

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

http://mydomain.com/new_page_1.html
and

http://mydomain.com/new_page_2.html
what should replace (*) in my snippet below:

<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

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

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

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

absolute beginner

05-12-2013, 11:34 PM

I believe I understand why it's not working for me, but am not entirely sure what to do about it. iWeb publishes the snippets as external files which the main page calls upon. If I manually remove my page from the server after publishing and add the html directly to the page and then put it back on the server it will work. The problem with this approach (aside from positioning, which I believe I can resolve) is that everytime I make a minor edit to the page, it will break it and require me to go through the process of post publishing edit again.

djr33

05-12-2013, 11:54 PM

The simple answer: don't use iWeb. It's limited. Or, if you do want to use it, just be happy with what it does for you.

"WYSIWYG" (preview-based) editors are inherently limited and tend to generate bad code. They do work for certain purposes, but they're not ideal.

It can feel like a big leap to start writing the code yourself, but it's a good idea if you want full control.

Especially for a program like iWeb with very specific options, you're going to be limited. For something a little more flexible, like Dreamweaver, you'll still face some problems, but usually it won't get in the way of you editing the code yourself. With iWeb (and I don't know too much about it to be honest) my impression is that it will actually restrict you from making certain modifications, at least (as you've found) if you want to go back and edit it with iWeb later.

absolute beginner

05-13-2013, 03:31 AM

You are indeed correct, I have already learned this.

It isn't so much the limitations (or more likely correctly, the hoops you need to jump through) that are a problem, I have found that most things can be worked around in iWeb with a little patience. The basic issue I have with iWeb is that it is extremely difficult to optimise your site (perhaps impossible), patience just bugs me, slow sites bug my customers and that's a bigger problem.

I have taken the opportunity of taking the 30 day free trial for creative cloud and am currently evaluating DW, but I'm also aware that a replacement for iWeb (EasyWeb) may be released at the WWDC and I'd like to take a look at that before making any decisions. However, I now have my old site to maintain, the new one I've started and am most of the way through and two new applications to look at. My old site is poor and I'd like to think my new site is a little better, but ultimately I want to make a better site that can be updated with producing simple xml files, so that my staff can do it instead of me.

Before I can do that, I have a lot to learn. As a surveyor rather than a web designer I feel like I'm looking at quantum physics whilst I've only just discovered the atom, so for now I'm looking to finish what I've started (www.gartside.co.uk/Old/Welcome.html - (while it's in an 'old folder, it's actually new and will be moved when appropriate) and spend whatever time it takes to learn things properly.

I hope this makes sense, thank you for your advice, it is good advice.

djr33

05-13-2013, 03:53 AM

iWeb is easy, and therefore limited, including everything you've noticed like no ability to optimize anything. If you find yourself working around it, then that's defeating the point-- it's no longer easy, and there will be some things that are either very difficult to work around, or are impossible in iWeb.

A program like Dreamweaver is better, but I still wouldn't really recommend it. The good news there is that you'd have full control of your code (except for a few features where it would try to manage your site-- I'd suggest turning those off if I were you). But it would still end up, in many ways, only giving the illusion of helping you-- again, making it "easy" while actually causing fundamental problems-- mostly that it writes bad code and teaches you to rely on it to write HTML rather than learning it yourself.

All you need is a plain text editor, like Notepad. We've had a number of discussions of good editors, and some useful features are code highlighting, built in FTP, and displaying line numbers. They all share the fact that you'd write all of the code by hand. Almost everything else is superfluous, at least once you reach a certain level.

It isn't the worst idea to have some kind of WYSIWYG editor around for things you don't want to type out by hand (perhaps you want to edit a very long passage of text and want to make certain things bold), but even then I'd probably recommend using find/replace to fix the code that is generated. (I'd love to find a convenient text-only editor that allowed quick editing like that-- the preview isn't really the helpful part-- it's the time it takes to type code repetitively.)

Whatever WYSIWYG editor you use next, it will still have some problems. It's up to you. Maybe you don't need perfect code and complete flexibility, and you just don't have time to learn to write it all by hand. That's fine, as long as it fits your purposes. So maybe check out whatever follows iWeb, but it will improve the situation, not fix it. iWeb is, among the WYSIWYG editors, pretty bad, though. It's easy, but that's part of why it's bad.

(To be clear, I have nothing against "easy" programs. I do some filmmaking as well, and I tend to use iMovie for basic things because it's fast, then I switch to Final Cut Pro for serious projects because it's more powerful. Which is better? FCP, no question. But is iMovie useless? No, just limited and for simpler things.)

Finally, another reason to write code by hand is for things that can't be seen in a preview-based editor. Once you get into any extras like Javascript or server-side languages (like PHP), HTML will be the output, not the underlying code. Then you'll do everything by hand, out of necessity. You can add some extras here and there while still working in a WYSIWYG editor, but (especially beyond Javacript) you'll hit the limits pretty quickly.