使用环境为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
10
function callChildFunction(){
11
//call functions belongs to child page
12
document.frames['child'].testChildFunction();
13
}
14
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
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
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
38

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

child.html

我已经把文件打包js_iframe.rar