JavaScript 编程开发jquery iframe操作详细解析 程序员文章站 2023-11-09 12:17:16 使用jquery操作iframe 1、 内容里有两个ifame ...</div> <div class="content"> <p><strong><font style="background-color: #ccffcc">使用jquery操作iframe </font></strong></p> <p><strong>1、 内容里有两个ifame </strong></p> <p><iframe id="leftiframe"...</iframe><br> <iframe id="mainiframe..</iframe></p> <p>leftiframe中jquery改变mainiframe的src代码：<br> $("#mainframe",parent.document.body).attr("src","https://www.radys.cn")</p> <p><strong>2、 如果内容里面有一个id为mainiframe的ifame </strong><br> <iframe id="mainifame"...></ifame><br> ifame包含一个someid<br> <p id="someid">you want to get this content</p><br> 得到someid的内容</p> <p> $("#mainiframe").contents().find("someid").html() html 或者 $("#mainiframe").contains().find("someid").text()值</p> <p><strong>3、在父窗口中操作 选中iframe中的所有单选钮</strong><br> $(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");</p> <p>那选择id自然就是依然使用find方法<br> $(window.frames["iframe1"].document).find("#id")</p> <p><strong>4、 如上面所示 </strong><br> leftiframe中的jquery操作mainiframe的内容someid的内容<br> $("#mainframe",parent.document.body).contents().find("someid").html()或者 $("#mainframe",parent.document.body).contents().find("someid").val()</p> <p><font style="background-color: #ccffff">使用<a href="https://www.2cto.com/kf/ware/java/" target="_blank" class="keylink" rel="nofollow">java</a>script操纵iframe </font></p> <p><strong>框架间的互相引用 </strong></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><strong><font style="color: #ff0000">1．父框架到子框架的引用 </font></strong></p> <p>知道了上述原理，从父框架引用子框架变的非常容易，即：</p> <p>window.frames["framename"];</p> <p>这样就引用了页面内名为framename的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：</p> <p>window.frames["framename"].frames["framename2"];</p> <p>这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。</p> <p><strong><font style="color: #ff0000">2．子框架到父框架的引用 </font></strong></p> <p>每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。</p> <p><strong><font style="color: #ff0000">3．兄弟框架间的引用 </font></strong></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><strong><font style="color: #ff0000">4．不同层次框架间的互相引用 </font></strong></p> <p>框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：</p> <p>self.parent.frames["childname"].frames["targetframename"];</p> <p><strong><font style="color: #ff0000">5．对顶层框架的引用 </font></strong></p> <p>和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：</p> <p>//判断本框架是否为顶层框架</p> <p>if(self==top){</p> <p>//omething</p> <p>}</p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/2100914.html"> PHP strripos函数用法总结 </a> </p> <p> 下一篇： <a href="/article/2100919.html"> Html5 canvas实现粒子时钟的示例代码 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2100916.html" target="_blank" title="JavaScript 编程开发jquery iframe操作详细解析"> <h2> JavaScript 编程开发jquery iframe操作详细解析 </h2> </a> </li> <li> <a href="/article/2075169.html" target="_blank" title="JavaScript编程开发中jquery常用操作小结"> <h2> JavaScript编程开发中jquery常用操作小结 </h2> </a> </li> <li> <a href="/article/1474843.html" target="_blank" title="JavaScript编程开发中jQuery插件开发详细教程"> <h2> JavaScript编程开发中jQuery插件开发详细教程 </h2> </a> </li> <li> <a href="/article/1443540.html" target="_blank" title="JavaScript编程开发中利用jquery操作Radio方法小结"> <h2> JavaScript编程开发中利用jquery操作Radio方法小结 </h2> </a> </li> <li> <a href="/article/1347948.html" target="_blank" title="JavaScript编程开发如何使用jquery实现iframe自适应高度"> <h2> JavaScript编程开发如何使用jquery实现iframe自适应高度 </h2> </a> </li> <li> <a href="/article/1212872.html" target="_blank" title="JavaScript编程开发中jquery常用操作小结"> <h2> JavaScript编程开发中jquery常用操作小结 </h2> </a> </li> <li> <a href="/article/1172098.html" target="_blank" title="JavaScript 编程开发jquery iframe操作详细解析"> <h2> JavaScript 编程开发jquery iframe操作详细解析 </h2> </a> </li> <li> <a href="/article/705853.html" target="_blank" title="jquery iframe操作详细解析_jquery"> <h2> jquery iframe操作详细解析_jquery </h2> </a> </li> <li> <a href="/article/552831.html" target="_blank" title="jquery iframe操作详细解析_jquery"> <h2> jquery iframe操作详细解析_jquery </h2> </a> </li> <li> <a href="/article/157025.html" target="_blank" title="JavaScript编程开发中利用jquery操作Radio方法小结"> <h2> JavaScript编程开发中利用jquery操作Radio方法小结 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>