定义框架布局的文件叫做父窗口(parent window),它描述的每个框架都是其子框架(child)。虽然父窗口不可见,但在浏览器中查看页面源代码的时候可以看到它。
在Web页面中创建框架要使用的是HTML<frameset>标签,注意不是<body>标签。创建框架至少需要三个文件。第一个文件定义框架(子窗口)的布局,包括框架的位置及大小。每个框架集的rows和cols属性指定了框架在窗口中需要占用的空间。属性值默认使用精确的像素值表示,也可以使用百分比表示占窗口的比例或用星号(*)分配剩余的空间。
1、创建html框架
①按列分割
<!doctypehtml>
<head><title>FrameMe!</title></head>
<!--创建有两个文件的框架集 -->
<!--当前文件名为framesets.html -->
<frameset cols="25%,75%">
<framesrc="form.html">
<framesrc="Script.html">
</frameset><noframes></noframes>
</html>
②按行分隔
<!doctypehtml>
<head><title>FrameMe!</title></head>
<!--创建有三个文件的框架集 -->
<!--当前文件名为framesets.html -->
<frameset rows="130,*,*"frameborder="yes" border="1" framespacing="0" >
<framesrc="form.html">
<framesrc="Script.html" scrolling="no">
<framesrc="form.html">
</frameset><noframes></noframes>
</html>
2、frame对象
在JavaScript中,HTML框架是由frame对象数组表示的。Frames[]数组是window对象的一个属性,并被窗口的parent属性所引用。数组的各个元素分别表示文档中对应次序上的框架。也就是说,window.parent.frames[0]表示框架集中定义的第一个框架。如果我们给框架起了名字,那么就可以利用框架的名字引用它。因为框架就是小窗口,所以它可以与window对象共享很多属性和方法。
3、使用top属性将主窗口保持在框架外
可以将示例的JavaScript代码放置到页面的<head>部分,使用location方法强制页面加载到主窗口。每个窗口都有一个top属性,该属性是浏览器当前加载的最顶层window对象的一个引用。
<html>
<head>
<title>Forcingthe Frame</title>
<scripttype="text/javascript">
if(window!=top){//window 不是层次结构的顶层窗口则为true
top.location.href=location.href;//将该窗口置于顶层
}
</script>
</head>
<bodybgcolor="yellow">
<h1>Theimportant page that we are talking about</h1>
</body>
</html>
4、location对象
location对象是window对象的一个属性,用来访问窗口当前加载文档的URL。
页面中包含框架的两个弊端:
①搜索引擎抓取不到完整的页面。这样用户通过搜索引擎查到的页面只是其中的一部分,不会是整个框架集。
②当页面被划分为框架后,如果浏览器没有指向顶层框架集,那么用户将无法将该页面加入书签。
location对象可以用来确定当前浏览器中浏览的最顶层窗口。
格式:
JavaScript:window.location.href="URL";
JavaScript:window.location.replace("URL");
示例:
JavaScript:window.location.href="http://www.legos.com";
JavaScript:window.location.replace("http://www.legos.com");