Frame的使用

定义框架布局的文件叫做父窗口(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");

   

 

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值