对framesetframeiframe的js操作.docx
《对framesetframeiframe的js操作.docx》由会员分享，可在线阅读，更多相关《对framesetframeiframe的js操作.docx（4页珍藏版）》请在冰豆网上搜索。
对framesetframeiframe的js操作
对frameset、frame、iframe的js操作
框架编程概述
一个HTML页面可以有一个或多个子框架，这些子框架以来标记，用来显示一个独立的HTML页面。</p><p>这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。</p><p>框架间的互相引用</p><p>一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：</p><p>window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的属性。</p><p>因此，要引用一个子框架，可以使用如下语法：</p><p>window.frames["frameName"];</p><p>window.frames.frameName</p><p>window.frames[index]</p><p>其中，window字样也可以用self代替或省略，</p><p>window.frames["frameName"].frames["frameName2"];</p><p>这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。</p><p>2．子框架到父框架的引用</p><p>每个window对象都有一个parent属性，表示它的父框架。</p><p>如果该框架已经是顶层框架，则window.parent还表示该框架本身。</p><p>3．兄弟框架间的引用</p><p>如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架：</p><p><framesetrows="50%,50%"></p><p> <framesrc="1.html"name="frame1"/></p><p> <framesrc="2.html"name="frame2"/></p><p></frameset></p><p>在frame1中可以使用如下语句来引用frame2：</p><p>self.parent.frames["frame2"];</p><p>4．不同层次框架间的互相引用</p><p>框架的层次是针对顶层框架而言的。</p><p>当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：</p><p>self.parent.frames["childName"].frames["targetFrameName"];</p><p>5．对顶层框架的引用</p><p>和parent属性类似，window对象还有一个top属性。</p><p>它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：</p><p>//判断本框架是否为顶层框架</p><p>if（self==top）{</p><p> //dosomething</p><p>}</p><p>改变框架的载入页面</p><p>对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如：</p><p>window.frames[0].location="1.html";</p><p>这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架。</p><p><framesetrows="50%,50%"></p><p> <framesrc="1.html"name="frame1"/></p><p> <framesrc="2.html"name="frame2"/></p><p></frameset></p><p><!</p><p>--somecode--></p><p><ahref="frame1.location='3.html;frame2.location='4.html'"onclick="">link</a></p><p><!</p><p>--somecode--></p><p>引用其他框架内的JavaScript变量和函数</p><p>在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码：</p><p><scriptlanguage="JavaScript"type="text/javascript"></p><p><!</p><p>--</p><p>functionhello（）{</p><p> alert（"hello,ajax!</p><p>"）;</p><p>}</p><p>window.hello（）;</p><p>//--></p><p></script></p><p>如果运行了这段代码，会弹出“hello,ajax!</p><p>”的窗口，这正是执行hello（）函数的结果。</p><p>那为什么hello（）变成了window对象的方法呢？</p><p>因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。</p><p>例如：</p><p>vara=1;</p><p>alert（window.a）;</p><p>就会弹出对话框显示为1。</p><p>同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。</p><p>例如：</p><p>一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。</p><p>在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的JavaScript变量不会丢失，可以用来存储全局数据。</p><p>其实现原理如下：</p><p>假设左侧页面为link.html，右侧页面为show.html，页面结构如下：</p><p><!</p><p>DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"></p><p><html></p><p><head></p><p><title>NewDocument</title></p><p></head></p><p><framesetcols="20%,80%"></p><p> <framesrc="link.html"name="link"/></p><p> <framesrc="show.html"name="show"/></p><p></frameset></p><p></html></p><p>在show.html中展示的商品旁边可以加入这样一条语句：</p><p><ahref="void（0）"onclick="self.parent.link.addToOrders（32068）">加入购物车</a></p><p>其中link表示导航框架，在link.html页面中定义了arrOrders数组来存储商品的id，函数addToOrders（）用来响应商品旁边【购买】链接的单击事件，它接收的参数id表示商品的id，例子中是一个id为32068的商品：</p><p><scriptlanguage="JavaScript"type="text/javascript"></p><p><!</p><p>--</p><p>vararrOrders=newArray（）;</p><p>functionaddToOrders（id）{</p><p> arrOrders.push（id）;</p><p>}</p><p>//--></p><p></script></p><p>这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。</p><p>框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。</p><p>页面内引用此页面中Iframe页面内的控件的值可直接写：</p><p>functiontest（）{</p><p> varnum=window.iframename.inputtextname.value;</p><p>alert（num）;</p><p>}</p><p>此页面中的Iframe要调用页面中的js代码时可直接写：</p><p><inputvalue="点击"type="button"onclick="window.parent.test（）"/></p><p>为了您的安全，请只打开来源可靠的网址</p><p>打开网站 取消</p><p></p> </div> <div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div> <script> function showmore() { $(".readmore").hide(); $(".detail-article").css({ "height":"auto", "overflow": "hidden" }); } $(document).ready(function() { var dh = $(".detail-article").height(); if(dh >100) { $(".detail-article").css({ "height":"100px", "overflow": "hidden" }); } else { $(".readmore").hide(); } }); </script> </div> <script> var defaultShowPage = parseInt("5"); var id = "4785763"; var total_page = "4"; var mfull = false; var mshow = false; function DownLoad() { window.location.href='https://m.bdocx.com/down/4785763.html'; } function relate() { var reltop = $('#relate').offset().top-50; $("html,body").animate({ scrollTop: reltop }, 500); } </script> <div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/21262033.html" title="第六章《实数》总复习课件PPT资料.ppt">第六章《实数》总复习课件PPT资料.ppt</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/21254514.html" title="人教版七年级下册数学考点复习PPT格式课件下载.ppt">人教版七年级下册数学考点复习PPT格式课件下载.ppt</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939329.html" title="体育教案模板Word下载.docx">体育教案模板Word下载.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939196.html" title="层析填料Capto MMC的使用说明Word格式文档下载.docx">层析填料Capto MMC的使用说明Word格式文档下载.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939157.html" title="中国古代文学史1考试试题及答案Word文件下载.docx">中国古代文学史1考试试题及答案Word文件下载.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939155.html" title="广州话正音字典关于某粤语部分Word下载.docx">广州话正音字典关于某粤语部分Word下载.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939153.html" title="农药经营许可证申请材料Word文件下载.docx">农药经营许可证申请材料Word文件下载.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939087.html" title="文言文 练习11Word格式文档下载.docx">文言文 练习11Word格式文档下载.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939065.html" title="良名宝鉴Word下载.docx">良名宝鉴Word下载.docx</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20938969.html" title="江苏高考语文文言文部分Word文档格式.docx">江苏高考语文文言文部分Word文档格式.docx</a> </li> </ul> </div> </div> <div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/2190416.html" target="_parent" title="有效沟通的基本原则doc.docx">有效沟通的基本原则doc.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/2190417.html" target="_parent" title="圆锥破碎机构造与原理.docx">圆锥破碎机构造与原理.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/2190418.html" target="_parent" title="现浇结构模板安装检验批质量验收记录.docx">现浇结构模板安装检验批质量验收记录.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/2190419.html" target="_parent" title="高考全国卷ⅲ理综试题解析原卷版新.docx">高考全国卷ⅲ理综试题解析原卷版新.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/2190420.html" target="_parent" title="小手拉大手清洁家园活动实施方案修改.docx">小手拉大手清洁家园活动实施方案修改.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/2190421.html" target="_parent" title="在线考试系统数据库设计.docx">在线考试系统数据库设计.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/2190422.html" target="_parent" title="高速公路施工组织设计审批稿.docx">高速公路施工组织设计审批稿.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/2190423.html" target="_parent" title="高中语文《荷塘月色》的课后习题答案.docx">高中语文《荷塘月色》的课后习题答案.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/2190424.html" target="_parent" title="招标文件盐城工学院新校区学生公寓楼工程.docx">招标文件盐城工学院新校区学生公寓楼工程.docx</a></li> </ul> </div> </div> <div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;"> 相关搜索</div> <div class="widget-box pt0" style="border: none; padding:0px 5px;"> <ul class="taglist--inline multi"> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=framesetframeiframe">framesetframeiframe</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=js">js</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e6%93%8d%e4%bd%9c">操作</a></li> </ul> </div> <br /> <div > 当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a> > <a href="https://m.bdocx.com/booklist-00019.html">高中教育</a><span> > </span><a href="https://m.bdocx.com/booklist-0001900009.html">高考</a> </div> <br /> <div class="cssnone"> <iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=tbfZn3jAnrk%3d&parto=%2ficKm8I1II2pcluIKGufHnyDixjHH5QbHw7exuF%2fzJsIn64dBi4dEP%2f9Eb5OalxRNSkfBMMvgp1w%2bKZF6eqo7BR7djct7g92QIrlFqFKcO56A62BPPSUH8TtVrmSfoHs1ek%2fnV6GEe2A9XQ2N1JQkL9n6VYPciAU7H%2bFGMIqhkbafvpNye25zLaRRkR0z3W2PwApugB8xuRNB0FBDIbsYz3JTuestKEt" frameborder="0" style="width: 0px; height: 0px">
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1
