js 与 iframe
使用环境为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
<html>2
<head>3
<script language="javascript">
4
function callChildElement(){
5
//call child page's function6
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 page12
document.frames['child'].testChildFunction();13
}14
15
function callChildElement2(){16
//another method to acquire the element in the child page17
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 page22
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
child.html
child.html
我已经把文件打包js_iframe.rar
