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>