javascript控制html父子框架iframe的值传递及方法引用问题

目录
[隐藏]

这里要讨论的问题涉及到这几个方面:
 

1. 父框架获取子框架的元素值
2. 子框架获取父框架的元素值
3. 子框架之间的元素值获取
4. 父框架调用子框架的方法
5. 子框架调用父框架的方法
6. 子框架之间的方法调用

以下是根据收集与查阅整理的一些资料,仅作参考,不足之处敬请指正。
首先以三个简单的页面作为例子进行说明

主页面代码:

<html>
<head>
<title>主页面</title>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js?ver=1'></script>

<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.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>

iframeA页面及代码:

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js?ver=1'></script>
<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
 

举例:
 

var v = window.frames[0].document.getElementById("subdiv1").innerHTML;
alert(v);

jquery方法
在父窗口中操作 选中IFRAME中的所有输入框:
$(window.frames["iframeSon"].document).find(":text");
 

举例:
 

var o = $(window.frames[0].document).find(":div#subdiv1");
alert(o.html());

举例二:在父窗口中操作 选中IFRAME中的所有单选钮:
 

$(window.frames["iframeA"].document).find("input[@type='radio']").attr("checked","true");

2. 子框架操作父框架的元素值

DOM方法:
window.parent.document

举例:
 

var v = window.parent.document.getElementById("mainDiv").innerHTML;
alert(v);
window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据";

jquery方法
在IFRAME中操作 选中父窗口中的所有输入框:
$(window.parent.document).find(":text");
 

举例:
 

var o = $(window.parent.document).find(":div#mainDiv");
alert(o.html());

3. 子框架之间的元素值操作
 

这个需要借助主页面间接获取另一个子页面。子页面A通过主页面间接获取子页面B,然后即与正常操作dom相同

DOM方式举例

//通过父页面,间接获取另外一个子页面
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代码:
 

$("#iframeA",parent.document.body).attr("src",http://lzw.me);

4. 父框架调用子框架的方法

基本格式为:window.frames[sonframe].子框架函数方法

例如一个页面里有多个iframe,每个iframe里都有一个doQuery方法。
主页面调用每个iframe的showSubValue方法举例:

for(var i=0;i<window.frames.length;i++){
   window.frames.showSubValue();
}

5. 子框架调用父框架的方法

子页面触发主页面的函数方法,只需要如下操作即可
 parent.window.函数方法
举例参考:

if(getcookie("lzw.me.user")=="") parent.window.login_form();

6. 子框架之间的方法调用
参考3和4,举例如下:

 var oDoc = top.parent.document; //获取父窗体DOM对象
 var oAnotherFrame = oDoc.frames["iframeB"]; //返回另外一个iframe

 oAnotherFrame.showSubValue(); //执行子窗体iframeB的方法

 

点赞 (0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.