神马文学网：想知道神马，提问回答学习问题百度都知道
神马文学网
神马文学网
问题
答案
分类
热门
精品
公告
神马文学网,百度知道,问答,回答,神马知道
神马文学网
神马文学网是一部内容开放、自由的互动网络百科全书
客观、专业、权威的知识性百科全书
js frame 框架编程
来源：百度文库 编辑：
神马文学网
时间：2024/04/25 16:13:59
js frame 框架编程
1 框架编程概述
一个Html 页面可以有一个或多个子框架，这些子框架以
来标记，用来显示一<br>个独立的Html 页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，<br>例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一<br>个框架中表单的行为等。<br><br><strong>2 框架间的互相引用<br></strong>一个页面中的所有框架以集合的形式作为window 对象的属性提供，例如：<br>window.frames 就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是<br>类似的，不同的是，这些集合是document 的属性。因此，要引用一个子框架，可以使用如<br>下语法：<br>window.frames[“frameName”];<br>window.frames.frameName<br>window.frames[index]<br>其中，window字样也可以用self代替或省略，假设frameName 为页面中第一个框架，<br>则以下的写法是等价的：<br>self.frames[“frameName”]<br>self.frames[0]<br>frames[0]<br>frameName<br>了解了如何引用一个框架，那么引用的这个框架到底是什么呢？其实，每个框架都对应<br>一个HTML 页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所<br>谓对框架的引用也就是对window 对象的引用。有了这个window 对象，就可以很方便地对<br>其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location<br>属性来改变框架内的页面等。<br>下面分别介绍不同层次框架间的互相引用：<br>2.1．父框架到子框架的引用<br>知道了上述原理，从父框架引用子框架变的非常容易，即：<br>window.frames[“frameName”];<br>这样就引用了页面内名为frameName 的子框架。如果要引用子框架内的子框架，根据<br>引用的框架实际就是window对象的性质，可以这样实现：<br>window.frames[“frameName”].frames[“frameName2”];<br>这样就很引用到了二级子框架，以此类推，可以实现多层框架的引用。<br>2.2．子框架到父框架的引用<br>每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，<br>则window.parent 还表示该框架本身。<br>2.3．兄弟框架间的引用<br>如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相<br>引用，例如一个页面包括2 个子框架：<br><frameset rows="50%,50%"><br><frame src="1.html" name="frame1" /><br><frame src="2.html" name="frame2" /><br></frameset><br>在frame1 中可以使用如下语句来引用frame2：<br>self.parent.frames[“frame2”];<br>2.4．不同层次框架间的互相引用<br>框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一<br>个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，<br>例如：<br>self.parent.frames[“childName”].frames[“targetFrameName”];<br>2.5．对顶层框架的引用<br>和parent 属性类似，window 对象还有一个top 属性。它表示对顶层框架的引用，这可<br>以用来判断一个框架自身是否为顶层框架，例如：<br>//判断本框架是否为顶层框架<br>if(self==top){<br>//dosomething<br>}<br><br><strong>3 改变框架的载入页面</strong><br>前面已经讲到，对框架的引用就是对window对象的引用，利用window对象的location<br>属性，可以改变框架的导航，例如：<br>window.frames[0].location=”1.html”;<br>这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链<br>接来更新多个框架。<br><frameset rows="50%,50%"><br><frame src="1.html" name="frame1" /><br><frame src="2.html" name="frame2" /><br></frameset><br><!--somecode--><br><a href=”frame1.location=’3.html;frame2.location=’4.html’” onclick=””>link</a><br><!--somecode--><br><br><strong>4 引用其他框架内的JavaScript变量和函数<br></strong>在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码：<br><script language="JavaScript" type="text/javascript"><br><!--<br>function hello(){<br>alert("hello,ajax!");<br>}<br>window.hello();<br>//--><br></script><br>如果运行了这段代码，会弹出“hello,ajax!”的窗口，这正是执行hello()函数的结果。<br>那为什么hello()变成了window对象的方法呢？事实上，在一个页面内定义的所有全局变量<br>和全局函数都是作为window对象的成员。例如：<br>var a=1;<br>alert(window.a);<br>就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过<br>window对象来调用。<br>为了方便大家的理解，下面举例说明。一个商品浏览页面由两个子框架组成，左侧表示<br>商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁<br>的【购买】链接将商品加入购物车。<br>在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导<br>航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中<br>的JavaScript变量不会丢失，可以用来存储全局数据。其实现原理如下：<br>假设左侧页面为links.html，右侧页面为show.html，页面结构如下：<br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br><html><br><head><br><title> New Document </title><br></head><br><frameset cols="20%,80%"><br><frame src="link.html" name="link" /><br><frame src="show.html" name="show" /><br></frameset><br></html><br>在show.html 中展示的商品旁边可以加入这样一条语句：<br><a href=”void(0)” onclick=”self.parent.link.addToOrders(32068)”>加入购物车</a><br>其中link表示导航框架，在link.html 页面中定义了arrOrders数组来存储商品的id，函<br>数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id 表示商品的<br>id，例子中是一个id为32068 的商品：<br><script language="JavaScript" type="text/javascript"><br><!--<br>var arrOrders=new Array();<br>function addToOrders(id){<br>arrOrders.push(id);<br>}<br>//--><br></script><br>这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。<br>框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通<br>过window 对象的引用来建立联系，是web 开发中的一个重要机制。在Ajax 开发中，还可<br>以利用隐藏框架实现各种技巧，在后面介绍Ajax 实例编程时可以发现，无刷新上传文件以<br>及解决Ajax的前进后退问题都会用到这种技术。 <br><br>以上内容来自《征服AJAX》 <br><br></div> <div class="list-group"> <a href="/article/371360" class="list-group-item">js frame 框架编程</a> <a href="/article/126696" class="list-group-item">一个关于框架页面frame之间JS函数调用的问题</a> <a href="/article/1017294" class="list-group-item">一个关于框架页面frame之间JS函数调用的问题</a> <a href="/article/87734" class="list-group-item">JavaScript框架编程</a> <a href="/article/351745" class="list-group-item">JS 刷新本页、父页、框架</a> <a href="/article/785729" class="list-group-item">超好用的JS验证框架(LiveValidation)</a> <a href="/article/839492" class="list-group-item">[转]Js框架介绍及比较</a> <a href="/article/690633" class="list-group-item">JS 刷新本页、父页、框架 - ie421.NET - 博客园</a> <a href="/article/1473296" class="list-group-item">JS 刷新本页、父页、框架 - ie421.NET - 博客园</a> <a href="/article/39609" class="list-group-item">利用Spring框架改进J2EE编程</a> <a href="/article/1147947" class="list-group-item">MVC应用EF框架编程小思</a> <a href="/article/2741259" class="list-group-item">Architecture Frame</a> <a href="/article/10658" class="list-group-item">编程论坛-架构，构件，组件，框架，中间件之间区别！[转]</a> <a href="/article/88712" class="list-group-item">编程论坛-架构，构件，组件，框架，中间件之间区别！[转]</a> <a href="/article/402919" class="list-group-item">js解决如何在iframe框架加个打开和关闭的按钮（转载）</a> <a href="/article/543135" class="list-group-item">prototype使用学习手册指南之event.js - Prototype框架 - Ja...</a> <a href="/article/1872541" class="list-group-item">Validator框架JS检验功能 - ℡瀦娃娃ゞɑ - JavaEye技术网站</a> <a href="/article/2666024" class="list-group-item">JS 跳出iframe框架,退出 - 海里的贝壳的日志 - 网易博客</a> <a href="/article/75667" class="list-group-item">快速精通FRAME</a> <a href="/article/80153" class="list-group-item">frame HTML元素</a> <a href="/article/26701" class="list-group-item">Matrix - 与 Java 共舞 - Jakarta Struts 编程：使用Tiles框架（第三部分）</a> <a href="/article/178917" class="list-group-item">架构，构件，组件，框架，中间件之间区别！[转] — 编程爱好者论坛 bbs.programfan.com</a> <a href="/article/1262549" class="list-group-item">手把手教你搭建用MFC进行OpenGL编程的框架</a> <a href="/article/1769459" class="list-group-item">frame buffer device驱动程序(转)</a> </div> </div> </div> </div> </div> </div> <footer id="footer" class="footer hidden-print"> <div class="container"> <div class="panel panel-default"> <div class="panel-heading">相关问题</div> <div class="panel-body"> <a class="btn btn-default" href="/article/1836115" title="【淮西丿商经】企业家要做的三件事">【淮西丿商经】企业家要做的三件事</a> <a class="btn btn-default" href="/article/1836116" title="花草图谱【全图（1）-（22）】">花草图谱【全图（1）-（22）】</a> <a class="btn btn-default" href="/article/1836117" title="执行死刑中的真实故事!（点击率百万的文章）偷偷">执行死刑中的真实故事!（点击率百万的文章）偷偷</a> <a class="btn btn-default" href="/article/1836118" title="33个QQ技巧，但不要做坏事哦…">33个QQ技巧，但不要做坏事哦…</a> <a class="btn btn-default" href="/article/1836119" title="油泼辣子:这个夏天刺激你味蕾的绝秘武器">油泼辣子:这个夏天刺激你味蕾的绝秘武器</a> <a class="btn btn-default" href="/article/1836120" title="专业摄影图片">专业摄影图片</a> <a class="btn btn-default" href="/article/1836121" title="黄金分割1">黄金分割1</a> <a class="btn btn-default" href="/article/1836122" title="湖南省有色地质勘查局 >> 地勘简报 >> 简报第70期">湖南省有色地质勘查局 >> 地勘简报 >> 简报第70期</a> <a class="btn btn-default" href="/article/1836123" title="极品桌面">极品桌面</a> <a class="btn btn-default" href="/article/1836124" title="伊春空难责任主体扑朔迷离 是不是甩鞭子航线？-搜狐新闻">伊春空难责任主体扑朔迷离 是不是甩鞭子航线？-搜狐新闻</a> <a class="btn btn-default" href="/article/1836125" title="以解放思想大讨论为契机 实现二四五队跨越式发展">以解放思想大讨论为契机 实现二四五队跨越式发展</a> <a class="btn btn-default" href="/article/1836126" title="为什么提倡放生">为什么提倡放生</a> <a class="btn btn-default" href="/article/1836127" title="很现实的">很现实的</a> <a class="btn btn-default" href="/article/1836128" title="新一代中国青年日渐成熟将引领国家未来">新一代中国青年日渐成熟将引领国家未来</a> <a class="btn btn-default" href="/article/1836129" title="英文有些话，我们总是说不出口，用另一种语言默念，或许是一种释怀……">英文有些话，我们总是说不出口，用另一种语言默念，或许是一种释怀……</a> <a class="btn btn-default" href="/article/1836130" title="宋子文：国民政府中对日抗战态度最强硬的人物">宋子文：国民政府中对日抗战态度最强硬的人物</a> <a class="btn btn-default" href="/article/1836131" title="《 读 者 》卷首语100 篇j">《 读 者 》卷首语100 篇j</a> <a class="btn btn-default" href="/article/1836132" title="天底下只有三件事。">天底下只有三件事。</a> <a class="btn btn-default" href="/article/1836133" title="作品是艺术家情感活动的结晶（原创）">作品是艺术家情感活动的结晶（原创）</a> <a class="btn btn-default" href="/article/1836134" title="超实用！一个小老板的日常管理手册-转载">超实用！一个小老板的日常管理手册-转载</a> <a class="btn btn-default" href="/article/1836135" title="秦淮八艳">秦淮八艳</a> <a class="btn btn-default" href="/article/1836136" title="3维油画">3维油画</a> <a class="btn btn-default" href="/article/1836137" title="浙江教育厅长痛批：应试教育“绑架”了学生">浙江教育厅长痛批：应试教育“绑架”了学生</a> <a class="btn btn-default" href="/article/1836138" title="湖南省有色地质勘查局 >> 行业动态">湖南省有色地质勘查局 >> 行业动态</a> <a class="btn btn-default" href="/article/1836139" title="计算机常用英语术语ee">计算机常用英语术语ee</a> <a class="btn btn-default" href="/article/1836140" title="【淮西丿文章·正】国军退出南京告全国国民书">【淮西丿文章·正】国军退出南京告全国国民书</a> <a class="btn btn-default" href="/article/1836141" title="官员财产申报立法的国外经验">官员财产申报立法的国外经验</a> <a class="btn btn-default" href="/article/1836142" title="练双盘的益处和循序渐进修练法">练双盘的益处和循序渐进修练法</a> <a class="btn btn-default" href="/article/1836143" title="实用人生哲语">实用人生哲语</a> <a class="btn btn-default" href="/article/1836144" title="哲理故事三则：总会有办法！">哲理故事三则：总会有办法！</a> <a class="btn btn-default" href="/article/1836145" title="河南安阳市委副书记失踪续 其妻被控制接受调查-搜狐新闻">河南安阳市委副书记失踪续 其妻被控制接受调查-搜狐新闻</a> </div> </div></div> <div class="copy-right"> <p>神马文学网，客观、专业、权威的知识性互动百科全书。</p></div> </footer> </body> </html>
神马文学网