对frameset、frame、iframe的Javascript操作
框架编程概述
一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的变量、调用其他框架内的函数、控制另一个框架中表单的行为等。
框架间的互相引用
一个页面中的所有框架以集合的形式作为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属性来改变框架内的页面等。
下面分别介绍不同层次框架间的互相引用:
1.父框架到子框架的引用
知道了上述原理,从父框架引用子框架变的非常容易,即:
window.frames["frameName"];
这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架,根据引用的框架实际就是window对象的性质,可以这样实现:
window.frames["frameName"].frames["frameName2"];
这样就引用到了二级子框架,以此类推,可以实现多层框架的引用。
2.子框架到父框架的引用
每个window对象都有一个parent属性,表示它的父框架。如果该框架已经是顶层框架,则window.parent还表示该框架本身。
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"];
4.不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时,只要知道自己所在的层次以及另一个框架所在的层次和名字,利用框架引用的window对象性质,可以很容易地实现互相访问,例如:
self.parent.frames["childName"].frames["targetFrameName"];
5.对顶层框架的引用
和parent属性类似,window对象还有一个top属性。它表示对顶层框架的引用,这可以用来判断一个框架自身是否为顶层框架,例如:
//判断本框架是否为顶层框架
if(self==top){
//dosomething
}
改变框架的载入页面
对框架的引用就是对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-->
引用其他框架内的变量和函数
在介绍引用其他框架内变量和函数的技术之前,先来看以下代码:
<script language="" type="text/">
<!--
function hello(){
alert("hello,ajax!");
}
window.hello();
//-->
</script>
如果运行了这段代码,会弹出“hello,ajax!”的窗口,这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢?因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如:
var a=1;
alert(window.a);
就会弹出对话框显示为1。同样的原理,在不同框架之间共享变量和函数,就是要通过window对象来调用。
例如:一个商品浏览页面由两个子框架组成,左侧表示商品分类的链接;当用户单击分类链接时,右侧显示相应的商品列表;用户可以单击商品旁的【购买】链接将商品加入购物车。
在这个例子中,可以利用左侧导航页面来存储用户希望购买的商品,因为当用户单击导航链接时,变化的是另外一个页面,即商品展示页面,而导航页面本身是不变的,因此其中的变量不会丢失,可以用来存储全局数据。其实现原理如下:
假设左侧页面为link.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="" type="text/">
<!--
var arrOrders=new Array();
function addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
这样,在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。
框架可以使一个页面划分为功能独立的多个模块,每个模块之间彼此独立,但又可以通过window对象的引用来建立联系,是Web开发中的一个重要机制。
页面内引用此页面中Iframe页面内的控件的值可直接写:
function test() {
var num = window.iframename.inputtextname.value;
alert( num );
}
此页面中的Iframe要调用页面中的js代码时可直接写:
<input value="点击" type="button" onclick="window.parent.test()" />
分享到:
相关推荐
这是一个用Python编写的日历拼图求解程序,主要用来解决以下问题:给定8块不规则形状的拼图,在一个7x7的网格中拼出所有可能的日期组合。程序需要确保每次拼图都恰好留出两个空格,分别代表月份(1-12)和日期(1-31,根据月份不同天数不同)。 程序的核心算法采用深度优先搜索(DFS),通过不断尝试不同的拼图放置位置、旋转角度和翻转方式来寻找所有可能的解。为了提高运行效率,程序使用了多进程并行计算,同时利用NumPy进行矩阵运算,大大提升了计算速度。 此外,程序还包含了一些实用的功能,比如解的查重、结果保存、进度日志等。它不仅能找出所有可能的日期组合,还会将结果以易读的格式保存到文件中。对于想要研究组合优化问题或者对拼图游戏感兴趣的同学来说,这是一个不错的参考示例。
库存报表1113
法律事务_
百分点:2024年4月食品餐饮行业舆情分析报告.pdf
进程间通信.pptx
ISO协议和SAE协议对应关系.docx
基于uniapp校园帮外卖跑腿快递代拿平台设计【可发布到小程序和HTML5】毕业源码案例设计Uniapp_Campus_Help_Delivery基于uniapp校园帮外卖跑腿快递代拿平台设计【可发布到小程序和HTML5】毕业源码案例设计开发软件 Eclipse或者Idea + HbuilderX + Mysql + Redis开发技术uni-app 是一个使用vue的语法+微信小程序的标签和API的跨平台接口框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台,几乎覆盖所有流量端端接口符合java语言的Springboot技术开发后台登录地址http://localhost:8888/gp/login管理员账号密码 admin/123456用户账号密码ys4/123456骑手账号密码pt4/123456功能介绍系统共有3个身份用户、跑腿员和管理员,其中用户和跑腿员在移动端实现,管理员在web端登录管理,在移动端可以注册成为用户或者跑腿人员。用户登录后可以发布订单的订单,订单分类有很多外卖订单、购物订单、快递订单
测绘工程_
配电网自动化技术—配电网馈线监控终端.pptx
内容概要:本文探讨了通过微调预训练语言模型(LMs)来构建更好的语言智能体的方法。研究提出了一个新的方法——FireAct,它利用从多个任务和提示方法生成的任务解决轨迹数据对小型模型进行微调,提高了模型在自然问答任务中的表现、鲁棒性和泛化能力。实验表明,通过这种多元化的学习支持,语言智能体能够更好地应对噪声环境、跨任务泛化,并提高效率和性能。 适合人群:对语言模型微调及应用感兴趣的学术研究人员和工程技术人员。 使用场景及目标:本文的研究旨在推动语言智能体的发展,特别是提升它们在多任务场景下的推理能力和行动效果。主要应用场景包括基于文本的知识检索、复杂问题解答和工具交互等。 其他说明:作者详细展示了不同数据规模、提示方式以及模型大小对微调效果的影响,为未来进一步探索提供了有益的指导。同时,文章强调了多方法和多任务混合微调的重要性和潜力,为进一步优化语言智能体指明了方向。
教学教务系统原型设计
wygdove 本科毕业设计一个集成医疗传感器,室内传感器,及调用外部环境数据的综合平台。主要对应一个人的身体健康检测,人的周围环境,以及外界大环境,以人为主体的智能医疗系统。
非常好的python学习资料包含笔记+源代码+教程100%好用.zip
洗衣店全球市场报告:2023年洗衣机零售额高达934亿元,潜力无限 在快节奏的现代生活中,衣物清洁与保养成为了人们日常不可或缺的需求之一。洗衣店,作为这一需求的直接响应者,正悄然经历着一场前所未有的变革。在这片充满机遇的海域中,如何精准把握市场脉搏,有效利用技术创新提升服务品质,成为了众多洗衣店企业亟需解答的关键问题。本文将深入探讨洗衣店市场的现状、趋势及咨询服务的重要性,为您揭示这片蓝海的无限潜力。 市场概况 近年来,洗衣店市场展现出强劲的增长势头。据QYR最新调研,2023年洗衣机全渠道零售量达到4005万台,零售额高达934亿元,这一数据不仅反映了家庭洗涤需求的持续扩大,也间接映射出洗衣店作为专业洗涤服务提供商的市场潜力。随着生活水平的提高和消费观念的转变,消费者对衣物清洁的品质要求日益提升,传统的家庭洗涤方式已难以满足高端面料和特殊衣物的保养需求,这为洗衣店行业提供了广阔的发展空间。预计未来几年,受智能洗涤设备、自助洗衣柜、线上预约平台等新兴业务模式的推动,洗衣店市场将保持年均10%以上的增长率,市场规模持续扩大。 技术创新与趋势 技术创新是推动洗衣店行业转型升级的核心动力。智
3690-机械设计制造及其自动化
DCP-7090/7095D/7190DN/7195DW DCP-B7500D/B7520DW/B7530DN/B7535DW DCP-L2510D/L2511D/L2512D/L2530DW DCP-L2531DW/L2532DW/L2535D/L2535DW DCP-L2536D/L2537DW/L2550DN/L2550DW DCP-L2551DN/L2551DW/L2552DN HL-L2390DW/L2395DW MFC-7390/7490D/7890DN/7895DW MFC-B7700D/B7715DW/B7720DN MFC-L2690DW/L2710DN/L2710DW/L2712DN MFC-L2712DW/L2713DW/L2715D/L2715DW MFC-L2716D/L2716DW/L2717DW MFC-L2730DW/L2732DW/L2750DW/L2750DWXL
faster rcnn算法pytorch版本,按requirements.txt文件配置即可。
信息化教学基本理论省公共课一等奖全国赛课获奖课件.pptx
内容概要:本文档主要介绍了Westport Channel(简称WPC)与Logan Beach(简称LGB)两个硬件设备的DPLL固件更新方法,以及I2C驱动器的具体编程指南。文章从WPC和LGB的针脚布局开始,逐步讲解了连接设置方式、固件升级步骤和可能出现的问题及其解决办法,最后还附带了Microchip DPLL固件升级工具的安装指导和操作截图。 适用人群:适用于需要进行网络接口卡固件维护的技术人员、IT管理员或有一定电子技术背景的研发工程师。 使用场景及目标:为确保通信系统的稳定性和安全性,对网络适配器的关键部件如数字锁相环路(DPLL)实施正确的固件升级是必要的。文档详细指导用户完成这一过程,避免错误导致的设备故障。 其他说明:本文档为Intel公司的内部资料,涉及多项技术细节,仅供授权用户查阅。阅读前请确保已准备好相关软硬件环境并严格按照指引执行。对于复杂情况,可咨询Intel技术支持获取帮助。