http://blog.sina.com.cn/s/blog_67697189010116o0.html

***************************************************************

1 框架编程概述
一个Html
页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一

个独立的Html 页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,

例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一

个框架中表单的行为等。



2 框架间的互相引用
一个页面中的所有框架以集合的形式作为window
对象的属性提供,例如:

window.frames 就表示该页面内所有框架的集合,这和表单对象、链接对象、图片对象等是

类似的,不同的是,这些集合是document 的属性。因此,要引用一个子框架,可以使用如

下语法:

window.frames[“frameName”];

window.frames.frameName

window.frames[index]

其中,window字样也可以用self代替或省略,假设frameName 为页面中第一个框架,

则以下的写法是等价的:

self.frames[“frameName”]

self.frames[0]

frames[0]

frameName

了解了如何引用一个框架,那么引用的这个框架到底是什么呢?其实,每个框架都对应

一个HTML 页面,所以这个框架也是一个独立的浏览器窗口,它具有窗口的所有性质,所

谓对框架的引用也就是对window 对象的引用。有了这个window 对象,就可以很方便地对

其中的页面进行操作,例如使用window.document对象向页面写入数据、使用window.location

属性来改变框架内的页面等。

下面分别介绍不同层次框架间的互相引用:

2.1.父框架到子框架的引用

知道了上述原理,从父框架引用子框架变的非常容易,即:

window.frames[“frameName”];

这样就引用了页面内名为frameName 的子框架。如果要引用子框架内的子框架,根据

引用的框架实际就是window对象的性质,可以这样实现:

window.frames[“frameName”].frames[“frameName2”];

这样就很引用到了二级子框架,以此类推,可以实现多层框架的引用。

2.2.子框架到父框架的引用

每个window对象都有一个parent属性,表示它的父框架。如果该框架已经是顶层框架,

则window.parent 还表示该框架本身。

2.3.兄弟框架间的引用

如果两个框架同为一个框架的子框架,它们称为兄弟框架,可以通过父框架来实现互相

引用,例如一个页面包括2 个子框架:

<frameset rows="50%,50%">

<frame src="1.html" name="frame1"
/>

<frame src="2.html" name="frame2"
/>

</frameset>

在frame1 中可以使用如下语句来引用frame2:

self.parent.frames[“frame2”];

2.4.不同层次框架间的互相引用

框架的层次是针对顶层框架而言的。当层次不同时,只要知道自己所在的层次以及另一

个框架所在的层次和名字,利用框架引用的window对象性质,可以很容易地实现互相访问,

例如:

self.parent.frames[“childName”].frames[“targetFrameName”];

2.5.对顶层框架的引用

和parent 属性类似,window 对象还有一个top 属性。它表示对顶层框架的引用,这可

以用来判断一个框架自身是否为顶层框架,例如:

//判断本框架是否为顶层框架

if(self==top){

//dosomething

}



3 改变框架的载入页面

前面已经讲到,对框架的引用就是对window对象的引用,利用window对象的location

属性,可以改变框架的导航,例如:

window.frames[0].location=”1.html”;

这就将页面中第一个框架的页面重定向到1.html,利用这个性质,甚至可以使用一条链

接来更新多个框架。

<frameset rows="50%,50%">

<frame src="1.html" name="frame1"
/>

<frame src="2.html" name="frame2"
/>

</frameset>

<!--somecode-->

<a
href=”frame1.location=’3.html;frame2.location=’4.html’”
onclick=””>link</a>

<!--somecode-->



4
引用其他框架内的JavaScript变量和函数
在介绍引用其他框架内JavaScript变量和函数的技术之前,先来看以下代码:

<script language="JavaScript"
type="text/javascript">

<!--

function hello(){

alert("hello,ajax!");

}

window.hello();

//-->

</script>

如果运行了这段代码,会弹出“hello,ajax!”的窗口,这正是执行hello()函数的结果。

那为什么hello()变成了window对象的方法呢?事实上,在一个页面内定义的所有全局变量

和全局函数都是作为window对象的成员。例如:

var a=1;

alert(window.a);

就会弹出对话框显示为1。同样的原理,在不同框架之间共享变量和函数,就是要通过

window对象来调用。

为了方便大家的理解,下面举例说明。一个商品浏览页面由两个子框架组成,左侧表示

商品分类的链接;当用户单击分类链接时,右侧显示相应的商品列表;用户可以单击商品旁

的【购买】链接将商品加入购物车。

在这个例子中,可以利用左侧导航页面来存储用户希望购买的商品,因为当用户单击导

航链接时,变化的是另外一个页面,即商品展示页面,而导航页面本身是不变的,因此其中

的JavaScript变量不会丢失,可以用来存储全局数据。其实现原理如下:

假设左侧页面为links.html,右侧页面为show.html,页面结构如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">

<html>

<head>

<title> New Document
</title>

</head>

<frameset cols="20%,80%">

<frame src="link.html" name="link"
/>

<frame src="show.html" name="show"
/>

</frameset>

</html>

在show.html 中展示的商品旁边可以加入这样一条语句:

<a href=”void(0)”
onclick=”self.parent.link.addToOrders(32068)”>加入购物车</a>

其中link表示导航框架,在link.html 页面中定义了arrOrders数组来存储商品的id,函

数addToOrders()用来响应商品旁边【购买】链接的单击事件,它接收的参数id 表示商品的

id,例子中是一个id为32068 的商品:

<script language="JavaScript"
type="text/javascript">

<!--

var arrOrders=new Array();

function addToOrders(id){

arrOrders.push(id);

}

//-->

</script>

这样,在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。

框架可以使一个页面划分为功能独立的多个模块,每个模块之间彼此独立,但又可以通

过window 对象的引用来建立联系,是web 开发中的一个重要机制。在Ajax 开发中,还可

以利用隐藏框架实现各种技巧,在后面介绍Ajax 实例编程时可以发现,无刷新上传文件以

及解决Ajax的前进后退问题都会用到这种技术。



以上内容来自《征服AJAX》

html frames的更多相关文章

  1. 各浏览器Iframe对contentWindow、contentDocument、document及frames属性测试

    Iframe易于嵌套及管理页面,但经常遇到跨域.父子页面访问问题,对于子页面访问父页面可以兼容性地通过window.Top或window.Parent或window.frameElement等操作,但 ...

  2. WebBrowser 中遍历所有的frames

    枚举所有iframe的IWebBrowser2 // Get the IDispatch of the document. // LPDISPATCH lpDisp = NULL; lpDisp = ...

  3. javascript宿主对象之window.frames

    window.frames属性是当前页面所有框架的集合.要注意的事,这里并没有frame和iframe做出区分.而且,无论页面存不存在框架,window.frames属性总是存在的,并总是指向wind ...

  4. Js中获取frames中的元素

    var oCombo =  window.parent.frames["frmresourcetype"].document.getElementById('cmbType') ; ...

  5. Understanding page frames and pages

    Memory in Linux is organized in the form of pages (typically 4 KB in size). Contiguous linear addres ...

  6. 关于为什么window.frames[0].src不能获取src

    在DOM文档对象模型中,window对象处于最高层,而框架除了是当前窗体的一个节点外,本身也是独立window对象,当frames作为window对象时,有name属性, 而没有src属性,只有作为节 ...

  7. How to read video frames in hadoop?如何在Hadoop中读取视频帧?

    To process specialized file formats (such as video) in Hadoop, you'd have to write a custom InputFor ...

  8. Android和iOS中Cocos2D日志为什么会出现skip frames

    在你运行app在Android或iOS设备或iOS模拟器中时,日志里往往会出现一行: I/Choreographer(28956): Skipped 159 frames! The applicati ...

  9. iOS 基础:Frames、Bounds 和 CGGeometry

    https://segmentfault.com/a/1190000004695617 原文:<iOS Fundamentals: Frames, Bounds, and CGGeometry& ...

随机推荐

  1. 逆序数还原(FZU)

    逆序数还原 Accept: 244 Submit: 451 Time Limit: 1000 mSec Memory Limit : 32768 KB Problem Description 有一段时 ...

  2. The 3n + 1 problem 分类: POJ 2015-06-12 17:50 11人阅读 评论(0) 收藏

    The 3n + 1 problem Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 53927   Accepted: 17 ...

  3. LoadRunner使用之变量关联

    性能测试LR小结之参数关联(LoadRunner11.0) 关联对于LR是经常需要用到的,本章使用简单登录来介绍关联功能. 1.       Q:何为关联? 所谓的关联就是把脚本中某些写死的代码(ha ...

  4. 洛谷P1017 进制转换

    洛谷P1017 进制转换 题目描述 我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的(值减1)为指数,以10为底数的幂之和的形式.例如:123可表示为 \(1*10 ...

  5. EasyUI-标签(Tabs)用法

    用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个t ...

  6. centos6.6下编译安装mysql5.6之后启动失败:Starting MySQL... ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid).

    今天在编译安装mysql5.6时候出现Starting MySQL... ERROR! The server quit without updating PID file (/var/lib/mysq ...

  7. Struts2的输入校验(2)——客户端校验

    Struts2的输入校验(2) --客户端校验 Struts2客户端校验的使用: (1)使用Struts2的标签生成输入页面的表单: (2)为该<s:form>元素添加validate=& ...

  8. android 串口调试

    在usb调试过程中,都会选择串口查看log,更希望在串口中输入命令查看相关状态.但是一般情况下串口调试时 进程用户是shell,即使你在adb shell下是root用户. 暴力方法是在 adroid ...

  9. [转]or cad drc 错误

    本文转自 恋上姐的博客 http://blog.sina.com.cn/u/1750715103 用“取缔”一词,是源自<嘻哈四重奏>里面卢导的口头禅,哈哈借用一下!大多数DRC warn ...

  10. Dreamweaver学习笔记---2016.08.17

    静态网页:不访问数据库,直接写入HTML. 动态网页:在网上发布好的,我们可以通过网页预览到的,具有访问数据库的过程. HTML:Hyper Text Markup Language,超文本语音标记. ...