Frames : 一个特殊的窗口类型
许多初学者在处理 frame 时往往会出现这样或那样的错误,其实,frame 是一个特殊的窗口类型,只要明白了他们之间的关系,可以很容易控制,本文摘译自 JavaScript 2.0-The Complete Reference 一书的英文第二版(仅摘录了对理解 frame 有直接关系的章节),文章详细介绍了 frame ,相信对新手理解 frame 会有很大帮助。
对 window 和 frame 关系的错误理解是web开发者中普遍存在的问题,从 (x) html 和 Javascript 来看,每个窗口中显示的 frame 都能很容易的控制,事实上,当一个 window 有多个 frame , 可以通过 window.frames[] 来实现对每个独立的窗口目标的引用,一些简单却很有用的属性在下表中列举出来:
Window 属性 | 说明 |
---|---|
frames[] | 存放当前窗口中所有frame对象的数组。 |
length | 窗口 frame 的数目,和 window.frames.length 等同。 |
name | 当前窗口的名字,自 JavaScript 1.1 起,这个值是可读写的。 |
parent | 对父窗口的引用。 |
self | 对窗口自身的引用。 |
top | 对最高级别窗口的引用,这个值通常和parent一致,除非 frame 中有更多的 frame。 |
window | 另外一个对当前窗口的引用。 |
想用 Javascript 控制 frame 最主要的是要把各自的名字和他们之间的关系弄清楚,如果你有一个叫 frames.html 的页面,页面代码如下:
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>
- <title>FrameSet Test</title>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- </head>
- <frameset rows="33%,*,33%">
- <frame src="framerelationship.html" name="frame1" id="frame1" />
- <frame src="moreframes.html" name="frame2" id="frame2" />
- <frame src="framerelationship.html" name="frame5" id="frame5" />
- </frameset>
- </html>
在这种情况下,当前文档主体可以看作是三个 frame (frame1,frame2, and frame5) 的 parent ,你可以使用下面的方式取得 frame 数目:
Code:
window.frames.length
你如果在三个子 frame 中运行代码,可以用下面的方法 :
Code:
window.parent.frames.length
或者
Code:
parent.frames.length
parent 表示一个窗体的父窗体,也可以用 top 来表示最高级别的窗体,这样可以写成 top.frames.length ,但是需要注意的是:除非你有嵌套 frame ,否则 parent 和 top 通常表示的是一个对象。
访问一个 frame ,可以用 name 或者下标的方式查询 frames 数组,parent.frames[0].name 将会输出第一个 frame 的名字,在我们的例子中就是 frame1,同样,我们也可以用 parent.frame1 或者 parent.frames["frame1"] 来实现相同的操作,记住,一个 frame 就是一个 window,知道这个,就可以使用所有Window 和 Document 的方法。
当理解了 frame 之间的关系,可以很容易的通过 parent.frames[] 操作任何 frame ,假如你有一个简单的框架页面:
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>
- <title>Two Frames</title>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- </head>
- <frameset cols="300,*">
- <frame src="navigation.html" name="frame1" id="frame1" />
- <frame src="content.html" name="frame2" id="frame2" />
- </frameset>
- </html>
在 navigation 窗体里面,你可以通过下面的方式设置一个对 content 窗体引用的变量:
Code:
var contentFrame = parent.frames[1]; // 或者使用名称
iframe 是一个需要注意的 frame 变种,用iframe可以让你不使用框架,但是却可以嵌入页面,问题是,我们如何控制这些 iframe ?事实上,我们也可以用 frames[] 的方法,此外,如果你的 iframe 有命名,可以通过 getElementById 来操控,示例如下:
HTML:
<iframe src="http://www.google.com" name="iframe1" id="iframe1" height="200" width="200"></iframe>
- <form action="#" method="get">
- <input type="button" value="Load by Frames Array"
- onclick="frames['iframe1'].location='http://www.javascriptref.com';" />
- <input type="button" value="Load by DOM"
- onclick="document.getElementById('iframe1').src='http://www.pint.com';" />
- </form>
我尝试进行了比较,一个ASP页面上共有3个Frame: top.asp left.asp right.asp 在top.asp上点击一个连接后,希望根据top.asp传来的参数刷新left.asp和right.asp.给另外两个命名一下left和right 在top.asp中。点击的时候激活这个函数: function loads() { top.left.location.href="你要转向的网址"; top.right.location.href="你要转向的网址"; }
Frames : 一个特殊的窗口类型相关推荐
- 【Qt】窗口组件和窗口类型
00. 目录 文章目录 00. 目录 01. 概述 02. 开发环境 03. 窗口组件 04. 窗口类型 05. 预留 06. 附录 01. 概述 Qt Creator提供的默认基类只有QMainWi ...
- android 窗口类型分析
1, 概述 Android窗口类型主要分成了三大类: 1,应用程序窗口.一般应用程序的窗口,比如我们应用程序的Activity的窗口. 2,子窗口.一般在Activity里面的窗口,比如各种菜单等. ...
- 滑动窗口类型(Sliding window)
Sliding window,滑动窗口类型 介绍部分来自:https://www.zhihu.com/question/36738189/answer/908664455 滑动窗口类型的题目经常是用来 ...
- 威纶通屏幕(HMI)开发基本教程二:窗口类型的介绍
Easy Builder Pro是威纶通屏幕的开发环境,他的下载在我上一篇教程已说明清楚.下面是对它的窗口类型基本介绍: 窗口类型分四种: 1.基本窗口 2.快选窗口 3.公共窗口 4.系统信息窗口 ...
- 点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- Long类型传到前端失去精度(2):Long类型不是实体类的某一个字段,Long类型是一个函数的返回值
Long类型传到前端失去精度(2):Long类型不是实体类的某一个字段,Long类型是一个函数的返回值 又是转换Mybatis-Plus的一天,又遇到了之前熟悉的问题:Long类型传到前端失去精度.可 ...
- checkbox控件的checked属性作用是_VB6基本控件的使用,制作一个数据输入窗口
一个应用程序少不了数据输入的功能,今天教大家使用控件设计一个数据输入窗口,需要使用到6个控件: Label 文字标签 TextBox 文本框 OptionButton 单选按钮 ComboBox 下拉 ...
- html5-6 Frame框架窗口类型
html5-6 Frame框架窗口类型 一.总结 一句话总结: 1.点左侧的a链接如何打开右侧页面? <a href='user/index.html' target='right'>& ...
- 如何判断一个字符串的编码类型?
最近遇到这样一个问题: 预从一个txt文件中读取文本,但不清楚这个文件的编码方式,可能是ASCII的.UNICODE.UTF8等等,这样就造成对字符处理的不利啦.如何知道一个字符串的编码类型呢? 转载 ...
最新文章
- 基于消息队列 RocketMQ 的大型分布式应用上云较佳实践
- 一招教你解决大数据量下的各种报表使用问题
- Mybatis的SqlSession运行原理
- mac怎么设置默认浏览器 mac默认浏览器设置方法
- 快讯|腔镜手术机器人研发商“北京术锐”完成数千万元 A 轮融资,顺为资本领投...
- 计组之指令系统:3、CISC和RISC
- Junit5集成到Maven工程
- 机器人编程python代码_自己动手开发智能聊天机器人完全指南(附python完整源码)...
- yolov3从头实现(六)损失计算
- 黄聪:C#中用ILMerge将所有引用的DLL和exe文件打成一个exe文件,有图解
- 考研 数学一 公式笔记
- 反编译exe文件并替换图片资源
- 前端重要信息手机号、邮箱、身份证号进行脱敏处理
- Linux权限不理解?看完这篇就够用了
- jmeter-----使用
- 高手帮忙,菜鸟提问关于Query的基础问题!很急!就剩这些分了!好心人帮忙!
- ArcMap 镶嵌数据集基本使用方法
- 我眼中的博客MVB与投票 1
- linux 包括CentOS ubuntu 国内下载源/版本选择/如何下载老版本
- 怀旧营销:一场从“激发”到“裂变”的“记忆旅行”
热门文章
- 项目经理职业生涯的五道坎
- 今日头条推广房产的广告需要什么资质?今日头条广告开户找哪里?
- python matplotlib柱状图显示数据标签及百分号
- idea+springmvc+spring+mybatis+maven整合返回json数据web api-
- 南京大学2021计算机考研复试线是多少,2021南京大学
- java int格式转换文本_java 文件导出Excel 文本形式转数字格式解决,字段是int导出需求是数字解决方案...
- java计算机毕业设计在线毕设选题系统源码+系统+mysql数据库+lw文档
- word2016在方块里打勾
- css p段落首行缩进两个字符
- JSD-2204-Redis缓存-Day17