iframe 父子页面的传值和方法的调用

(1)父页面获取iframe中的元素值:


//根据iframe的id获取对象
var iframe = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//获取iframe中的元素值
var val=iframe.document.getElementById("t1").value


(2)在iframe中获取父页面中的元素值:


var val = parent.document.getElementById("txt1");  


(3)a包含2个iframe分别为b,c,现在从b中获取c中的元素的值:

var i1 = parent.window.frames['iframeId'];
var val = i1.document.getElementById("text1").value;

===========================================================================
iframe父子页面 互相调用js的方法

父页面:parent.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent</title>
<script>
 function parentFunction() {
  alert('function in parent');
 }

 function callChild() {
  child.window.childFunction();
  /*
  child 为iframe的name属性值,
  不能为id,因为在FireFox下id不能获取iframe对象
  */
 }
</script>
</head>
<body>
<input type="button" name="call child"  value="call child" onclick="callChild()"/>
<br/><br/>
<iframe name="child" src="./child.html" ></iframe>
</body>
</html>

子页面:child.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>child</title>
<script>
 function childFunction() {
  alert('function in child');
 }

 function callParent() {
  parent.parentFunction();
 }
</script>
</head>
<body>
<input type="button" name="call parent" value="call parent" onclick="callParent()"/>
</body>
</html>

参考文件:http://www.netingcn.com/iframe-js-function-call.html

posted @ 2013-10-29 16:55  令狐冲之12  阅读(522)  评论(0编辑  收藏  举报