框架编程概述
一个HTML页面可以有一个或多个子框架，这些子框架以来标记，用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。</p> <p>框架间的互相引用</p> <p>一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的属性。因此，要引用一个子框架，可以使用如下语法：</p> <p>window.frames["frameName"];</p> <p>window.frames.frameName</p> <p>window.frames[index]</p> <p>其中，window字样也可以用self代替或省略，假设frameName为页面中第一个框架，则以下的写法是等价的：</p> <p>self.frames["frameName"]</p> <p>self.frames[0]</p> <p>frames[0]</p> <p>frameName</p> <p>每个框架都对应一个HTML页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。有了这个window对象，就可以很方便地对其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。</p> <p>下面分别介绍不同层次框架间的互相引用：</p> <p>1．父框架到子框架的引用</p> <p>知道了上述原理，从父框架引用子框架变的非常容易，即：</p> <p>window.frames["frameName"];</p> <p>这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：</p> <p>window.frames["frameName"].frames["frameName2"];</p> <p>这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。</p> <p>2．子框架到父框架的引用</p> <p>每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。</p> <p>3．兄弟框架间的引用</p> <p>如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架：</p> <p><frameset rows="50%,50%"></p> <p><frame src="1.html" name="frame1" /></p> <p><frame src="2.html" name="frame2" /></p> <p></frameset></p> <p>在frame1中可以使用如下语句来引用frame2：</p> <p>self.parent.frames["frame2"];</p> <p>4．不同层次框架间的互相引用</p> <p>框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：</p> <p>self.parent.frames["childName"].frames["targetFrameName"];</p> <p>5．对顶层框架的引用</p> <p>和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：</p> <p>//判断本框架是否为顶层框架</p> <p>if(self==top){</p> <p>//dosomething</p> <p>}</p> <p></p> <p>改变框架的载入页面</p> <p>对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如：</p> <p>window.frames[0].location="1.html";</p> <p>这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架。</p> <p><frameset rows="50%,50%"></p> <p><frame src="1.html" name="frame1" /></p> <p><frame src="2.html" name="frame2" /></p> <p></frameset></p> <p><!--somecode--></p> <p><a href="frame1.location='3.html;frame2.location='4.html'">link</a></p> <p><!--somecode--></p> <p>引用其他框架内的JavaScript变量和函数</p> <p>在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码：</p> <p><script language="JavaScript" type="text/javascript"></p> <p><!--</p> <p>function hello(){</p> <p>alert("hello,ajax!");</p> <p>}</p> <p>window.hello();</p> <p>//--></p> <p></script></p> <p>如果运行了这段代码，会弹出“hello,ajax!”的窗口，这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢？因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如：</p> <p>var a=1;</p> <p>alert(window.a);</p> <p>就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。</p> <p>例如：一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。</p> <p>在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的JavaScript变量不会丢失，可以用来存储全局数据。其实现原理如下：</p> <p>假设左侧页面为link.html，右侧页面为show.html，页面结构如下：</p> <p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"></p> <p><html></p> <p><head></p> <p><title> New Document </title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> <script type="text/javascript" src="/js/tongji.js"></script></p> <p></head></p> <p><frameset cols="20%,80%"></p> <p><frame src="link.html" name="link" /></p> <p><frame src="show.html" name="show" /></p> <p></frameset></p> <p></html></p> <p>在show.html中展示的商品旁边可以加入这样一条语句：</p> <p><a href="void(0)">加入购物车</a></p> <p>其中link表示导航框架，在link.html页面中定义了arrOrders数组来存储商品的id，函数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id表示商品的id，例子中是一个id为32068的商品：</p> <p><script language="JavaScript" type="text/javascript"></p> <p><!--</p> <p>var arrOrders=new Array();</p> <p>function addToOrders(id){</p> <p>arrOrders.push(id);</p> <p>}</p> <p>//--></p> <p></script></p> <p>这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。</p> <p>框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。在Ajax开发中，还可以利用隐藏框架实现各种技巧，在后面介绍Ajax实例编程时可以发现，无刷新上传文件以及解决Ajax的前进后退问题都会用到这种技术。</p> <p>更多信息请查看<a href="//www.reelogic.com/c2021.aspx" target="_blank">IT技术专栏</a></p> </div> <div class="c_nrgg"></div> <div class="c_nrgdd"> 更多信息请查看 <a href="//www.reelogic.com/c2025.aspx">脚本栏目</a> </div> <div class="c_nrgdd"></div> <div class="c_nrgdd"> <a href="//www.reelogic.com/memberNewsAdd.aspx">【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】</a> <a href="//www.reelogic.com/n4836c56.aspx">【点此处查询各地各类考试咨询QQ号码及交流群】</a> </div> <div class="c_nrgdds"> 上一篇： <a href="//www.reelogic.com/n1022263c2025.aspx">如何用javascript获取地址栏参数</a> </div> <div class="c_nrgdds"> 下一篇： <a href="//www.reelogic.com/n1022268c2025.aspx">针对JavaScript的常用事件、对象捕获和使用技巧</a> </div> <div class="c_nrgdds"> 手机网站地址： <a href="//www.reelogic.com/wap/n1022267c2025.aspx">javascript 框架编程</a> </div> <div class="c_nrgdd"> 由于各方面情况的不断调整与变化， 提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！ </div> <div class="c_nrtja"> <div class="c_nrtja1"> <span class="c_nrtja2">相关阅读</span> <a href="//www.reelogic.com/c2025.aspx">脚本栏目</a> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970373c2025.aspx">Bottle框架中的装饰器类和描述符应用详解</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970372c2025.aspx">Python探索之SocketServer详解</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970368c2025.aspx">Python探索之实现一个简单的HTTP服务器</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970364c2025.aspx">python探索之BaseHTTPServer-实现Web服务器介绍</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970362c2025.aspx">13个最常用的Python深度学习库介绍</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970359c2025.aspx">深入理解Python中的*重复运算符</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970353c2025.aspx">python logging日志模块详解</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963425c2025.aspx">System表空间不足的报警问题浅析</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963424c2025.aspx">Android开发自定义TextView省略号样式的方法</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963423c2025.aspx">MySQL 清除表空间碎片的实例详解</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963422c2025.aspx">Ubuntu下MySQL安装及配置远程登录教程</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963421c2025.aspx">Python 2.x如何设置命令执行的超时时间实例</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963420c2025.aspx">windows 64位下redis安装教程</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963419c2025.aspx">Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963418c2025.aspx">浅谈Node Inspector 代理实现</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963417c2025.aspx">java web开发之购物车功能实现示例代码</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963416c2025.aspx">Android开发中GridView用法示例</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963415c2025.aspx">Django ORM框架的定时任务如何使用详解</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963414c2025.aspx">SpringMail使用过程中的报错解决办法</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1963413c2025.aspx">Android 使用自定义RecyclerView控件实现Gallery效果</a></span> <span class="c_nrtja5" style="color:gray;">10月22日</span> </div> </div> </div> </div> <div class="c_lbright_nr"> <div class="c_nr_lbxx1"> <div class="c_lbright_nr1bt1s"> <a href="//www.reelogic.com/wap/"> 移动网站</a> </div> </div> <div class="c_nr_lbxx1"> <div class="c_lbright_nr1bt1"> 最新信息 </div> <div class="c_nr_lbxx_tui"> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294589c993.aspx">2024年楚雄州元谋县教育体育局选调教师拟选调人员公示</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294588c998.aspx">2024年上半年勐腊县卫生健康系统事业单位考核招聘拟聘公示（第二批）</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294587c1180.aspx">2024年云南空港百事特商务有限公司招聘公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294586c1277.aspx">2024年8月国家电投甘肃公司招聘公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294585c1615.aspx">2024年恒丰银行西安分行社会招聘启事（二）</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294584c1277.aspx">2024年中国葛洲坝集团电力有限责任公司成熟人才招聘公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294583c1697.aspx">2024年吉林省农村信用社联合社招聘公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294582c997.aspx">2024年文山州广南县桃源中小学校空余学位通告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294581c1056.aspx">2024年德宏州瑞丽市第五民族中学招聘编外高中数学教师通告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2294580c945.aspx">2024年云南省基层法律服务工作者执业核准考试公告</a> </div> </div> </div> <div class="c_nr_lbxx1"></div> <div class="c_nr_lbcd"> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/gwy.svg" width="20" height="20">公考类 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1072.aspx">云南公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1220.aspx">贵州公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1219.aspx">四川公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1311.aspx">广西公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1252.aspx">各省公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1015.aspx">国家公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1253.aspx">选调遴选</a></span> </div> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/zp.svg" width="20" height="20">招聘类 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c934.aspx">188app金宝搏 </a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1431.aspx"></a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1110.aspx">特岗教师</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1291.aspx">三支一扶</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1291.aspx">志 愿 者</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1448.aspx">银行招聘</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1124.aspx">国企招聘</a></span> </div> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/ks.svg" width="20" height="20">各类考试 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c690.aspx">学历升学</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c385.aspx"></a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c921.aspx">职业资格</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c373.aspx">外语考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c375.aspx">医学考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c225.aspx">工程考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c823.aspx">教师资格</a></span> </div> </div> </div> </div> <!-- <img src="http://admyn.ynpxrz.com/adv/hf.png" alt="" srcset=""> --> <div class="c_gywm"> <a href="//www.reelogic.com/n38c56.aspx" target="_blank">关于我们</a>| <a href="//www.reelogic.com/n76555c56.aspx" target="_blank">联系我们</a>| <a href="//www.reelogic.com/n340264c1277.aspx" target="_blank">人才招聘</a>| <a href="//www.reelogic.com/n3452c56.aspx" target="_blank">网站声明</a>| <a href="//www.reelogic.com/n2514c56.aspx" target="_blank">网站帮助</a>| <a href="//www.reelogic.com/memberNewsAdd.aspx" target="_blank">非正式的简要咨询</a>| <a href="//www.reelogic.com/n21580c56.aspx" target="_blank">简要咨询须知</a>| <a href="//www.reelogic.com/n4836c56.aspx" target="_blank">加入群交流</a>| <a href="//www.reelogic.com/wap" target="_blank">手机站点</a>| <a href="https://www.ynbxjy.com/tsjy.html" target="_blank">投诉建议</a> </div> <div class="c_gywm"> <span>工业和信息化部备案号：<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">滇ICP备2023014141号-1</a></span> <span><a href="//www.reelogic.com/n48442c56.aspx" target="_blank">云南省教育厅备案号：云教ICP备0901021</a></span> <span><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=53010202001879" target="_blank" rel="nofollow">滇公网安备53010202001879号</a></span> <span>人力资源服务许可证：（云）人服证字（2023）第0102001523号</span> </div> <div class="c_gywm1"> <div class="c_ga_1" style="width:200px;"> <a href="http://www.yn.cyberpolice.cn:81/RecValidate/RecView.aspx?RecordID=53010203402261" target="_blank" class="wjba" rel="nofollow"><img src="//www.reelogic.com/pic/gonganbeian.jpg" border="0" alt="云南网警备案专用图标" width="45" height="50"></a> </div> <div class="c_ga_2" style="width:700px;"> <span>联系电话：0871-65317125（9:00—18:00）</span> <span>获取招聘考试信息及咨询关注公众号：</span> <br> <span>咨询QQ：526150442（9:00—18:00）</span> <span>版权所有:<span style="font-weight: bold; font-family: arial;" id="iwms_cp"><a href="//www.reelogic.com"></a></span></span> </div> <div class="c_ga_3" style="width:200px;"> <a href="http://www.yn.cyberpolice.cn/" target="_blank" class="wjbj" rel="nofollow"><img src="//www.reelogic.com/pic/gonganbj.jpg" border="0" alt="云南网警报警专用图标" width="48" height="52"></a> </div> </div> <!-- <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://www.reelogic.com/hm.js?e5dabc539f2ab7c2f06ff8fce27ffff8"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> --> <div style="text-align:center;margin-bottom:5px;"><form action="http://www.baidu.com/baidu" target="_blank"><div bgcolor="#FFFFFF" style="text-align:center;"><input name="tn" type="hidden" value="baidu"><a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" width="80px" height="29px" alt="Baidu" align="bottom" border="0"></a><input type="text" name="word" size="30" placeholder="" value=""><input type="submit" value="baidu"></div></form></div><div id="so360" style="text-align:center;margin-bottom:5px;"><form action="https://www.so.com/" target="_blank" id="so360form"><img src="http://p1.qhimg.com/d/_onebox/search.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="so360_keyword" placeholder="" value=""> <input type="submit" id="so360_submit" value="360"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div id="sogou" style="text-align:center;margin-bottom:5px;"><form action="https://www.sogou.com/" target="_blank" id="so360form"><img src="https://www.sogou.com/web/index/images/logo_440x140.v.4.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="sogou.com_keyword" placeholder="" value=""> <input type="submit" id="sogou_submit" value="sougou"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div align="center"><a target="_blank" href="/sitemap.xml">map</a></div></body> </html>
事业单位
当前位置：