http://www.w3school.com.cn/tags/tag_iframe.asp
father.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ff(msg) {
alert(msg);
} function test() {
// 只能通过iframe名称获取子页面，不能通过id
var div = window.frames["b"].document.getElementById("div");
alert(div);
}
function test2() {
// 调用子页面方法
window.frames["b"].ff("hi san");
}
</script>
</head>
<body>
<span id="span">FFFFFFFFF</span>
<iframe id="a" name="b" width="200px" height="200px" src="san.html">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
<span>HHHHHHHH</span>
<br>
<a href="#" onclick="test()">点击获取子页面元素</a>
<br>
<a href="#" onclick="test2()">点击调用子页面方法</a>
</body>
</html>
san.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
// 调用父页面方法
window.parent.ff("hello");
}
function test2() {
var span = window.parent.document.getElementById("span");
alert(span);
}
function ff(msg) {
alert(msg);
}
</script>
</head>
<body>
<div id="div"
style="width: 100px; height: 100px; background-color: yellow"></div>
<a href="#" onclick="test()">点击调用父页面方法</a>
<br>
<a href="#" onclick="test2()">点击获取父页面元素</a>
<br>
</body>
</html>
补充：
jQuery选择元素用：
jQuery(expression, [context])
返回值:jQuery
$("#someSelector",parent.document);
$("#someSelector",document.frames['someIframeName'].document);
效果图：