Jquery 操作 Frame示例

最新推荐文章于 2023-03-21 18:21:27 发布

原创最新推荐文章于 2023-03-21 18:21:27 发布 · 2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #border #框架 #table #server #html

JQuery 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了在一个包含多个框架（Frameset或Iframe）的网页中进行元素选择及跨框架操作的方法。通过具体实例展示了如何在不同的框架之间选取元素并进行属性修改。

一、多框架集合

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>设备***管理系统平台</title> </head> <frameset border="0" framespacing="0" rows="106,*,26" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> <frame name="TopFrm" src="Top.aspx" mce_src="Top.aspx" marginwidth="0" marginheight="0" border="0" frameborder="no" scrolling="no" topmargin="0" leftmargin="0" target="WelcomeFrm" /> <frameset border="0" name="cen" framespacing="0" frameborder="0" cols="190,*" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> <frame name="LeftFrm" src="left.aspx" mce_src="left.aspx" border="0" marginwidth="0" bordercolor="#000" marginheight="0" frameborder="0" scrolling="no" topmargin="0" leftmargin="0" target="main" noresize="noresize"> <frameset border="0" framespacing="0" frameborder="no" cols="6,*"> <frame name="ShowOrHide" src="ShowOrHidden.aspx" mce_src="ShowOrHidden.aspx" noresize="noresize" scrolling="no" /> <frame name="WelcomeFrm" src="" border="0" frameborder="no" scrolling="yes" /> </frameset> </frameset> <frame name="BottomStateFrm" src="BottomStateFrame.aspx" mce_src="BottomStateFrame.aspx" border="0" framespacing="1" frameborder="0" scrolling="No" noresize="noresize" id="bottomFrame" /> </frameset> </html>

主页面FrmIndex中有如下几个框架：

二、多个Frame或Ifrme间选取

1、在主框架FrmIndex页面选中LeftFrm中的所有a元素：

$(window.frames['LeftFrm'].document).find('a').attr('href', 'www.baidu.com'); 或者： $(window.LeftFrm.document).find('a').attr('href', 'www.baidu.com');//直接框架名称

2、在框架LeftFrm页面中操作主框架页面所有元素a:

$(window.parent.document).find('a').attr('href', 'www.baidu.com');

3、在TopFrm页面中操作LeftFrm中的元素：

$shortcutTab = $('table[id=tabMenuLevel2]', window.parent.LeftFrm.document);//parent.frames['LeftFrm'].$('table[id=tabMenuLevel2]'); $('table[id=tabMenuLevel2]', window.parent.LeftFrm.document).append('<tr><td>hello ,TopFrm sets LeftFrm/'s Table element success! </td></tr>');