20.框架对象

JavaScript

  • 框架对象:

可以被窗口中的框架引用的对象,具有窗口对象的属性和方法。

格式:

top.frameName|frames[n].属性|方法

parent.frameName|frames[n].属性|方法

 

例:
/* -------- frameset.htm -------- */
<Script>

document.title = "框架组页";
var usrID = "来宾";

</Script>

<FRAMESET COLS="20%,80%">
    <FRAME SRC="menu.htm" NAME=leftFrame>
    <FRAMESET ROWS="10%,90%">
        <FRAME SRC="usrInfo.htm" NAME=upFrame>
        <FRAME SRC="welcome.htm" NAME=downFrame>
    </FRAMESET>
</FRAMESET>

 

<!-------- menu.htm -------->

<HEAD>
<TITLE>导航页</TITLE>
<STYLE>A{text-decoration:none}</STYLE>
</HEAD>
<BODY>
<CENTER>
<A HREF="login.htm" TARGET="downFrame">会员登录</A><BR>
<A HREF="hot.htm" TARGET="downFrame">热门优惠</A><BR>
<A HREF="welcome.htm" TARGET="downFrame">回 首 页</A>
<BR>
</CENTER>
</BODY>

 

/* -------- usrInfo.htm -------- */
<Script>

document.title = "用户信息";
var bye = "欢迎有空常来..."


document.write
("<MARQUEE>亲爱的<FONT COLOR='gray'><U>",top.usrID,"</U></FONT>会员,欢迎您的光临!</MARQUEE>");


</Script>

 

/* -------- login.htm -------- */
<Script>

document.title = "用户登录";

function login() {
    top.usrID = document.loginForm.usr.value;
    top.upFrame.location = "usrInfo.htm";
}

</Script>

<HTML>
<FORM NAME="loginForm">
请输入您的大名:
<INPUT TYPE="text" NAME="usr">
<INPUT TYPE="button" VALUE="填写完毕" onClick=login()>
</FORM>
</HTML>

  • 防止直接链接:

例:
<Script> /* -------- hot.htm -------- */

document.title = "热门优惠";

if (top.usrID == null) {
    location = "frameset.htm";
}

</Script>

今日优惠:

<LI>超级豪华大比萨。(原价$550,今天只要$450)
<LI>海鲜大比萨。(原价$550,今天只要$450)

  • 检查是否使用框架:

例:
<!-------- welcome.htm -------->

<HEAD>
<TITLE>首页</TITLE>
<STYLE>A{text-decoration:none}</STYLE>

<Script>

if (top.frames.length == 0) {
   location = "frameset.htm";
}
if (top.frames.length > 0) {
   location = "frameset.htm";
}

</Script>

</HEAD>
<CENTER>
欢迎光临<H1>
<FONT COLOR="green" FACE="arial">
My PIZZA</FONT></H1>
</CENTER>