个人中心
退出
javascript当中frame和frameset的用法
frame和frameset（企业用的少了，所以视频略过，见后面iframe部分）
马克- to-win：马克 java社区：防盗版实名手机尾号： 73203。
例 2.1.1（index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<!--col="221,*" means left column
is 221, right column is any value.frameborder="no" 就没有border了-->
<frameset cols="221,*" frameborder="yes" border="1" bordercolor="#0066CC">
<frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="main.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes>
<body>
noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
</body>
</noframes></html>
left.html
<!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=gb2312" />
<title>无标题文档</title>
<script>
alert("left");
</script>
</head>
<body>
<!-- Window.parent (Property)
A reference to the parent window in a framed pane.
Window.frames[] (Collection)有关这个， 参见bottom.html
qixy: note that parent point to index.html which has a frameset, which has two framesets, one is frames[0], the other is frames[1]. so 1 is main.html.
Window.self (Property)
can refer to a frame as well as a window.
当我在left.html中加一个断点后， 我就发现这时的self,因为在左边的frame当中， 所以指left.html
-->
<INPUT TYPE="button" value="parent测试" onclick="parent.frames[1].location='target1.html'">
<INPUT TYPE="button" value="self测试" onclick="self.location='target1.html'">
</body>
</html>
main.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<!--rows="220,*" means : 220 is top frame's height, * means bottom frame is arbitrary value.-->
<frameset rows="220,*" framespacing="1" frameborder="yes" border="1" bordercolor="#0066CC">
<frame src="top.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="bottom.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset><noframes></noframes>
</HTML>
top.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
top.html
</BODY>
</HTML>
bottom.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
alert("abc");
</script>
<BODY>
<!--Window.top (Property)
The topmost window in a framed hierarchy.The top property should consistently refer to the window at the top of the hierarchy.在bottom.html中插入断点,当我们运行index.html, firebug 说window.top指index,html,但如果我们直接运行bottom.html, top就指向bottom.html.
Window.frames[] (Collection)
An array containing window objects, each one referring to the content of a frame within the window.index.html有两个frame，0
是left.html, 1是main.html.
-->
<INPUT TYPE="button" value="top测试" onclick="top.frames[0].location='target1.html'">
<INPUT TYPE="button" value="top.frames[1].frames[0]测试" onclick="top.frames[1].frames[0].location='target1.html'">
</BODY>
</HTML>
target1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
target1.html
</BODY>
</HTML>
例 2.1.2（index.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<frameset rows="123,*" frameborder=no>
<frame src="logo.html" Scrolling=no>
<frame src="main.html" noresize>
</frameset>
</HTML>
logo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY leftmargin="0" topmargin="0">
<IMG SRC="logo.jpg" WIDTH="1020" HEIGHT="123" BORDER="0" ALT="">
</BODY>
</HTML>
main.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<!-- 1,4意味着左边和右边的比例是1:4 -->
<FRAMESET COLS="1,4">
<FRAME SRC="left.html" NAME="left">
<FRAME SRC="right.html" NAME="right">
</FRAMESET>
</HTML>
left.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<!--Anchor.target (Property)
In MSIE the Url.target property is also available as the Anchor.target property.
Property/method value type: String primitive
JavaScript syntax: - myAnchor.target
- myAnchor.target = newTarget
HTML syntax: <A TARGET="...">
This yields the value of the TARGET attribute in an <A>, <AREA> or <MAP> tag.
You can assign a new value to this property so that the URL will be directed to a different window or frame.
Here are some example target values:
_parent: immidiate parent.
_self: is self frame.
_top: the topmost window.
_blank: qixy: a new window.
Window name
Frame name
-->
<A HREF="first.html" target="_blank">测试_blank</A><P>
<A HREF="first.html" target="_self">测试_self</A><P>
<A HREF="first.html" target="_parent">测试_parent</A><P>
<A HREF="first.html" target="_top">测试_top</A><P>
</BODY>
</HTML>
first.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>我的主页</title>
</head>
<body>
这是我的第一个网页！
</body>
</html>
right.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
</BODY>
</HTML>
分类导航