这里要讨论的问题涉及到这几个方面：
1. 父框架获取子框架的元素值
2. 子框架获取父框架的元素值
3. 子框架之间的元素值获取
4. 父框架调用子框架的方法
5. 子框架调用父框架的方法
6. 子框架之间的方法调用
以下是根据收集与查阅整理的一些资料，仅作参考，不足之处敬请指正。
首先以三个简单的页面作为例子进行说明
主页面代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html><head><title>主页面</title><script type="text/javascript">function showSubValue(){ //var v = window.frames[0].document.getElementById("subdiv1").innerHTML; //alert(v); //var url="http://lzw.me" var o = $(window.frames[0].document).find(":div#subdiv1"); alert(o.html());}for(var i=0;i<window.frames.length;i++){ window.frames<span style="text-decoration: line-through;">.showSubValue();}</script></head><body><div id="mainDiv">主页面测试数据</div><input type="button" value="查看子页面数据" onclick="showSubValue();"/><iframe id="iframeA" src="iframeA.html" width="300" height="300"></iframe></body></html></span> |
iframeA页面及代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html><head><title>子页面A</title><script type="text/javascript">function showMainValue(){ //dom方式 //var v = window.parent.document.getElementById("mainDiv").innerHTML; //alert(v); //window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据"; //jquery方式 var o = $(window.parent.document).find(":div#mainDiv"); alert(o.html());}</script></head><body><div id="subdiv1">子页面测试数据</div><input type="text" id="txtUserName" name="txtUserNameA" value="iframeA"><input type="button" value="显示父页面数据" onclick="showMainValue();"/></body></html> |
iframeB页面及代码：
与iframeA雷同，略
1. 父框架操作子框架的元素值
DOM方法
window.frames["iframeSon"].document
举例：
1 2 | var v = window.frames[0].document.getElementById("subdiv1").innerHTML;alert(v); |
jquery方法
在父窗口中操作 选中IFRAME中的所有输入框：
$(window.frames["iframeSon"].document).find(":text");
举例：
1 2 | var o = $(window.frames[0].document).find(":div#subdiv1");alert(o.html()); |
举例二：在父窗口中操作 选中IFRAME中的所有单选钮：
1 | $(window.frames["iframeA"].document).find("input[@type='radio']").attr("checked","true"); |
2. 子框架操作父框架的元素值
DOM方法：
window.parent.document
举例：
1 2 3 | var v = window.parent.document.getElementById("mainDiv").innerHTML;alert(v);window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据"; |
jquery方法
在IFRAME中操作 选中父窗口中的所有输入框：
$(window.parent.document).find(":text");
举例：
1 2 | var o = $(window.parent.document).find(":div#mainDiv");alert(o.html()); |
3. 子框架之间的元素值操作
这个需要借助主页面间接获取另一个子页面。子页面A通过主页面间接获取子页面B，然后即与正常操作dom相同
DOM方式举例
1 2 3 4 5 6 7 8 9 10 11 12 | //通过父页面，间接获取另外一个子页面if (self != top) { var oDoc = top.parent.document; var oAnotherFrame = oDoc.frames["iframeB"]; //返回另外一个iframe alert(oAnotherFrame.location); alert(oAnotherFrame.document.body.innerHTML); alert(oAnotherFrame.document.documentElement.innerHTML); var oTxt = oAnotherFrame.document.getElementById("txtUserName"); alert(oTxt.value); } |
jqery方式举例
iframeB中jQuery改变iframeA的src代码：
1 | $("#iframeA",parent.document.body).attr("src",<a href="http://lzw.me/" target="_blank" rel="nofollow">http://lzw.me</a>); |
4. 父框架调用子框架的方法
基本格式为：window.frames[sonframe].子框架函数方法
例如一个页面里有多个iframe，每个iframe里都有一个doQuery方法。
主页面调用每个iframe的showSubValue方法举例：
1 2 3 | for(var i=0;i<window.frames.length;i++){ window.frames<span style="text-decoration: line-through;">.showSubValue();}</span> |
5. 子框架调用父框架的方法
子页面触发主页面的函数方法，只需要如下操作即可
parent.window.函数方法
举例参考：
1 | if(getcookie("lzw.me.user")=="") parent.window.login_form(); |
6. 子框架之间的方法调用
参考3和4，举例如下：
1 2 3 4 | var oDoc = top.parent.document; //获取父窗体DOM对象var oAnotherFrame = oDoc.frames["iframeB"]; //返回另外一个iframeoAnotherFrame.showSubValue(); //执行子窗体iframeB的方法 |
