使用环境为IE6,其它环境下面还没有试过。
在页面中使用iframe能为开发带来很多便利,而且iframe标签也被主流的游览所支持。下面是如何在父页面调用子页面的元素及函数:
有两种方法可以调用子页面的元素:
1.通过id获取iframe标签。不过我不知道后面的contentWindow是个什么东西,
document.getElementById('child').contentWindow.document.getElementById('content');
2.这个方式要好理解一点:
document.frames['child'].document.getElementById('content');
调用子页面的函数:
document.frames['child'].testChildFunction();
调用父页面的元素:
parent.document.getElementById('content');
调用父页面的函数:
parent.testParentFunction();
以下是具体的页面演示情况:
parent.html
1
<html>
2
<head>
3
<script language="javascript">
4
function callChildElement(){
5
//call child page's function
6
var content = document.frames['child'].document.getElementById('content');
7
window.alert(content.firstChild.nodeValue);
8
}
9![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
function callChildFunction(){
11
//call functions belongs to child page
12
document.frames['child'].testChildFunction();
13
}
14![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
function callChildElement2(){
16
//another method to acquire the element in the child page
17
var content = document.getElementById('child').contentWindow.document.getElementById('content');
18
window.alert(content.firstChild.nodeValue);
19
}
20![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
//this function will be called by child page
22
function testParentFunction(){
23
window.alert("Function belongs to parent.");
24
}
25
</script>
26
</head>
27![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
<body>
29
<input type="button" value="Test Child Element" onclick="callChildElement();"/>
30
<input type="button" value="Test Child Element2" onclick="callChildElement2();"/>
31
<input type="button" value="Test Child Function" onclick="callChildFunction()"/>
32
<input type="text" value="This will be called by child" size="40" id="content"/>
33
<iframe name="child" id="child" width="100%" height="100%" frameboder="0" src="child.html">
34
</iframe>
35
</body>
36
</html>
37![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
38![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
child.html
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
我已经把文件打包js_iframe.rar