Beginner JavaScript/HTML Frame Communication

Question

One of my assignments for my Web Design class is to create a page in which two frames communicate using JavaScript. There are four links on the lower frame (lower2.html) and when clicked, they're supposed to change the image in the upper frame (upper1.html) to the respective image but don't. Here's what I have:

File name: js-seventeen.html. This is the one I execute.

<HTML>
<HEAD>
<TITLE>HTML and JavaScript</TITLE>
</HEAD>
<FRAMESET ROWS="140,*">
<FRAME NAME="upperFrame" SRC="upper1.html">
<FRAME NAME="lowerFrame" SRC="lower2.html">
</FRAMESET>
</HTML>

File name: upper1.html. This is the upper frame that displays the images.

<HTML>
<HEAD>
<TITLE>HTML and JavaScript</TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG NAME="upperImage" SRC="lions.gif">
</CENTER>
</BODY>
</HTML>

File name: lower2.html. This is the lower frame that contains the links that should change the images, but don't. No matter what I click, it stays on the default lions.gif.

<HTML>
<HEAD>
<TITLE>HTML and JavaScript</TITLE>
<SCRIPT>
function setImage(number)
{
if (number==1)
{
    parent.upperFrame.document.upperImage.src="lions.gif";
}
if (number==2)
{
    parent.upperFrame.document.upperImage.src="tigers.gif";
}
if (number==3)
{
    parent.upperFrame.document.upperImage.src="bears.gif";
}
if (number==4)
{
    parent.upperFrame.document.upperImage.src="ohmy.gif";
}
return;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H2>IMAGE LIST</H2>
<TABLE>
<TR><TD><A HREF="javascript:setImage(1)">1: LIONS.GIF</A></TD></TR>
<TR><TD><A HREF="javascript:setImage(2)">2: TIGERS.GIF</A></TD></TR>
<TR><TD><A HREF="javascript:setImage(3)">3: BEARS.GIF</A></TD></TR>
<TR><TD><A HREF="javascript:setImage(4)">4: OHMY.GIF</A></TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

I've looked through the book and as far as I can tell, I've done everything properly. Thanks in advance for your help.

looks like 20th century stuff, I feel pity for you. frames are in window object collection called frames, so try something like parent.frames['upperframe'].document.images[0].src - im not sure if it's going to work, just try - as this is now completely useless and outdated stuff. — magyar1984
– magyar1984, Commented Sep 15, 2013 at 22:10
It doesn't work, but thanks anyway. I realise good design practise is to avoid frames in general, but I'm being taught from a book that tells me I can use Netscape to search for information and which explains how Oracle, Sun, and Microsoft are all competing with it to produce the best browser. :) — Matt
– Matt, Commented Sep 15, 2013 at 22:52
if you can afford to buy some newer stuff and you want do webdesign - invest in books, if you just need credits than it's ok ;) — magyar1984
– magyar1984, Commented Sep 16, 2013 at 9:01

fahadash · Accepted Answer · 2013-09-15 23:26:58Z

2

JavaScript mostly works in IDs. top gives you the main window.

Add ID attributes to frame and image tags

<frame id="upperFrame" name="upperFrame" >

You can also access frame by index

 top.frames[0].document.  ,,,

Read www.w3schools.com stuff. Also frameset has been done away with in HTML5 so consider learning about iframes

Assign IDs to the frame and image as well, make ID same as name and try something like this

 top.frames["upperFrame"].document.getElementById["imageIdNotName"].src = 'new value';

edited Sep 15, 2013 at 23:26

answered Sep 15, 2013 at 22:43

fahadash

3,3131 gold badge37 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Over a year ago

I literally just started learning this a few days ago. Where would I find the image ID or would I give it one with <A NAME="foobar">. Also, what would the value represent in your example? I realise this site is probably not for amateur questions like this but I appreciate your help.

Matt Over a year ago

Added IDs to the frame and image, still no luck. Is it possible the code is just no longer supported?

fahadash Over a year ago

Should be supported. What browser you are using ?

Matt Over a year ago

Chrome. I thought I'd tried Firefox and it didn't work but I just tried it again and it worked. Thanks for the help. For future reference (not that I'd probably ever use frames) I take it your script is the more widely accepted way of doing things?

Collectives™ on Stack Overflow

Beginner JavaScript/HTML Frame Communication

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related