Setting background color to variable in javascript Part 2

问题

I'm very new to JavaScript, and I have a webpage with 3 nested frames (a top one, and then a bottom one divided into two.) The top frame is titled Head, the bottom-left one is titled LeftFrame and the final one is titled RightFrame. Now, LeftFrame is a navigation bar, and I want to make it so that clicking on a link in LeftFrame will change the background color of Head. This is the code for the main webpage:

<HTML>
<HEAD>
<TITLE>Webcomics Review</TITLE>
</HEAD>

<FRAMESET BORDER=0 ROWS="12%,*">
<FRAME NAME"Head" NORESIZE SRC="Head.html">

<FRAMESET BORDER=0 COLS="15%,*">
<FRAME NAME="LeftFrame" NORESIZE SRC="navigation.html">
<FRAME NAME="RightFrame" NORESIZE SRC="mainpage.html">
</FRAMESET>

</FRAMESET>
</HTML>

And this is the code for the navigation bar which just has one link being worked on so far as a test:

<HTML>
<HEAD>
<TITLE>Webcomics Review</TITLE>
<SCRIPT>
function setColor1(number)
{
    if (number==1)
    {
        parent.Head.document.body.style.backgroundColor=#FF0000;
    }
    return;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FONT SIZE=3 FACE=Haettenschweiler>Webcomics:
<BR><BR>
<A HREF="xkcd.html" TARGET="RightFrame" STYLE="text-decoration: none" onClick="setColor1(1)">Xkcd</A>
<BR><BR>
<A HREF="qc.html" TARGET="RightFrame" STYLE="text-decoration: none">Questionable Content</A>
<BR><BR>
<A HREF="qwantz.html" TARGET="RightFrame" STYLE="text-decoration: none">Dinosaur Comics</A>
<BR><BR>
<A HREF="survivingtheworld.html" TARGET="RightFrame" STYLE="text-decoration: none">Surviving the World</A>
<BR><BR>
</CENTER>
</BODY>
</HTML>

Could someone let me know what I'm doing wrong, as nothing about the Head frame changes when upon clicking the "xkcd" link in navigation (the one I'm using to test.)

回答1:

try this:

//MAIN FRAMES PAGE
<html>
<head>
<title>test</title>
<script type="text/javascript">
function setColor1(color)
{
    HEAD.document.body.style.backgroundColor=color;
    return;
}
window.setColor = function(a){setColor1(a);}
</script>
</head>
<FRAMESET BORDER=1 ROWS="12%,*">
<FRAME NAME="HEAD" NORESIZE SRC="frame_head.html" id="HEAD">
<FRAMESET BORDER=1 COLS="15%,*">
    <FRAME NAME="LeftFrame" NORESIZE SRC="frame_footer.html">
    <FRAME NAME="RightFrame" NORESIZE SRC="frame_body.html">
</FRAMESET>
</FRAMESET>
</html>
//END MAIN FRAMES PAGE
/**************************************************************************/
//BODY PAGE (RightFrame)
<html>
<head>
<title>test</title>
<script type="text/javascript">
function setColor(color)
{
    window.parent.setColor(color);
    return;
}
</script>
</head>
<body>
    <a href="#" onclick="setColor('#f00')">one</a>&nbsp;
    <a href="#" onclick="setColor('#0f0')">two</a>&nbsp;
    <a href="#" onclick="setColor('#00f')">three</a>&nbsp;
    <a href="#" onclick="setColor('#f0f')">four</a>&nbsp;
    <a href="#" onclick="setColor('#ff0')">five</a>&nbsp;
    <a href="#" onclick="setColor('#0ff')">six</a>&nbsp;
</body>
</html>
/**************************************************************************/

来源：https://stackoverflow.com/questions/4643686/setting-background-color-to-variable-in-javascript-part-2

标签

javascript

background-color

frameset