曲径通幽论坛

 找回密码
 立即注册
搜索
查看: 5179|回复: 0

特定窗口名称(窗口的引用)

[复制链接]

716

主题

734

帖子

2946

积分

超级版主

Rank: 9Rank: 9Rank: 9

积分
2946
发表于 2013-4-26 15:52:15 | 显示全部楼层 |阅读模式
虽然一般情况下可以从框架名和 frame[] 数组对框架引用,下面介绍从特定的窗口名来引用框架。

特定窗口名称是由 window 对象的下面几个属性提供的:
parent : 当前窗口的父级窗口
self : 当前窗口
top : 顶层窗口

下面将要创建了一个稍显复杂的框架,它的框图如下所示:


实现代码:

<html>
<head>
  <title>框架</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>
    <!-- 将浏览器窗口水平分两部分,第一部分占据整个窗口的20%大小 -->
    <frameset rows="20%,*">
        <frame src="tip.htm" name="tip">
        <frameset cols="30%,*">
            <frame src="left.htm" name="left">
            <frame src="right_frame.htm" name="right">
          </frameset>
    </frameset>
  
</html>
在上面代码中,对于 right_top 和 right_low 两个框架在 right_frame.htm 里指定,其代码为:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<frameset rows="*,*" rols="50%,50%">
        <frame  name="right_top">
        <frame  name="right_low">
</frameset>

</html>

另外两个文件,tip.htm 和 left.htm 分别如下:
tip.htm

<html>
<head>
  <title>tip</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" language="javascript">
  <!--
    function update_right_low() {
        window.parent.right.right_low.document.write("update from tip frame");
    }
  -->
</script>
  
</head>
<body>
    <form name="TipForm">
        <input type="button" onClick="update_right_low()" value="update_Right_Low_Frame">
    </form>
</body>
</html>

left.htm

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<script type="text/javascript" language="javascript">
  <!--
        function change_tip_frame() {
            window.parent.tip.document.write("hello tip frame");
        }
        
        function change_rightTop_frame() {
            window.top.right.right_top.document.write("update from left frame");
        }
  -->
</script>

<body>
    <form name="myForm">
        <input type="button" onclick="change_tip_frame()" value="update tip frame">
        <input type="button" onclick="change_rightTop_frame()" value="update right_top frame">
    </form>
</body>   
</html>

效果如下图所示:


window 对象的 parent 属性,self 属性和 top 属性通常都运用于上面的这种框架之中。这 3 个属性的返回值都是一个 window 对象,用于代表不同的框架页。 window 对象的 parent, self 和 top 属性都是相对当前的文档而言的。如对于 right_top 这个框架而言,self 代表其自身,parent 代表框架名为 right 的框架页,top 代表整个大的浏览器窗口(总框架页)。

父窗口对子窗口的引用
父窗口对子窗口的引用有下面两种方法:
1. 通过 frames[] 数组引用
2. 通过窗口名引用

比如对于 tip 这个框架,我们可以这么引用: window.frames[0] 或者 window.tip 。
又如对于 right_top ,我们可以这么引用 window.frames[2].frames[0] 或者 window.right.right_top 。

一般而言,直接使用名称来引用会显得直观一点。

子窗口对父窗口的引用
子窗口对父窗口的引用通常需要使用到 window 对象的 parent 属性,通过父窗口还可以引用其他窗口。

对顶级窗口的引用
无论框架的引用有多深,都可以使用 top 属性直接引用顶级窗口,然后再通过对顶级窗口的引用来引用其他窗口。

上面所述的引用在代码中均有体现。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|曲径通幽 ( 琼ICP备11001422号-1|公安备案:46900502000207 )

GMT+8, 2024-3-29 13:46 , Processed in 0.080191 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表