今天和朋友一块讨论,如何通过js在父页面和子页面之间传值的问题,总结如下:
需求描述:父页面有多个子页面,实现在父页面点击子页面,传值到子页面。
看着很简单,试了好久,主要纠结在如何获取iframe,刚开始用document.getElementById('iframe的ID'),后来查资料才发现这种方法只是去取出了一个OBJECT,不能操作它的函数方法,后来改成window.iframes["iframe的name"],这样就可以获取子页面的整个DOM,可以操作它的函数。
1、父页面代码
<html>
<head>
<title></title>
<script type="text/javascript" >
function callChild(){
var child_1 =window.frames["child"];
var str = "ddddd";
child_1.window.testJs(str);
}
function aa(str){
alert(str);
}
</script>
</head>
<body>
<iframe name="child" src="children.html" ></iframe>
<a onclick="callChild()">call children</a>
</body>
</html>
2、子页面代码
<html>
<head>
<title></title>
<script type="text/javascript">
function testJs(str){
alert(str);
}
function callParent(){
var str = "vdsss";
parent.aa(str)
}
</script>
</head>
<body>
<a onclick="callParent()">call parent</a>
</body>
</html>