在iframe中调用父页面和子页面js方法：
今天朋友问我：a页面用iframe引入b页面，而此时要在a页面怎么调用iframe所引入b页面里的方法，很熟悉，但就是忘记了，后来百度下，才晓得，主要通过window.frames["name属性"].方法名（），也就是iframe中的name属性，b页面调用a页面中的方法略过看代码吧
index.html
<html>
<head>
<script type="text/javascript">
function ff(){
alert(">>this is index's js function");
}
</script>
</head>
<body>
<div style="background: lightblue;">
<input type="button" value="index" onclick="ff();" />
<input type="button" value="inner" onclick='window.frames["childPage"].ff();' />
</div>
<iframe id="" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
</body>
</html>
inner.html
<html>
<head>
<script type="text/javascript">
function ff(){
alert(">>sdfdsdfdsfdsfsdfthis is inner page's js function");
}
</script>
</head>
<body>
<div>
<input type="button" value="index" onclick='parent.window.ff();' />
<input type="button" value="inner" onclick="ff();" />
</div>
</body>
</html>
子页面调用父页面的JS方法：window.parent.方法名();
下面就给出一个子孙三代的调用大家可以参考：
爷爷页面：
<!DOCTYPE html>
<html>
<head>
<title>frameDemo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script type="text/javascript">
function father(){
alert("father");
}
</script>
<body>
我是iframe主文件<p/>
<button onclick='window.frames["c1"].children();'>父调子</button>
<button onclick='window.frames["c1"].frames["c11"].sunzi();'>父调孙</button>
<div>
<iframe src="iframe/1.html" name="c1"></iframe>
</div>
</body>
</html>
父亲页面：
<!DOCTYPE html>
<html>
<head>
<title>1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function children(){
alert("children");
}
</script>
</head>
<body>
dsddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<p/>
<button onclick="window.parent.father();">子调父</button>
<button onclick='window.frames["c11"].sunzi();'>子调孙</button>
<iframe src="2.html" name="c11"></iframe>
</body>
</html>
孙子页面：
<!DOCTYPE html>
<html>
<head>
<title>2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function sunzi(){
alert("孙子");
}
</script>
</head>
<body>
iframe2222222222222222<p/>
<button onclick="window.parent.children();">孙调父</button>
<button onclick="window.top.father();">孙调爷</button><!-- 两种方式都可以 -->
<button onclick="window.parent.parent.father();">孙调爷</button>
</body>
</html>
调用兄弟节点的方法：<button onclick='window.parent.frames["c1"].children();'>调用兄弟节点的方法</button>
其实原理是找到父页面再找兄弟页面，再找兄弟的方法。
切记：在iframe下JS方法之间和html元素之间，JS成员变量之间是相互不影响的，它和动态包含和静态包含不同。这一点要切记，iframe只是在页面形式上看上去有着包含的关系。其实如果在父页面要调用子页面的方法和元素必须用window对象。
获取元素的值：
var t=$('div',window.frames["c1"].document);//父页面取儿子页面上的属性
var m=$('div',window.frames["c1"].frames["c11"].document);//父页面取孙子页面上的属性
alert($('div',window.parent.document).text());//孙子取父页面的属性
alert($('div',window.parent.parent.document).text());//孙子取爷爷页面的属性
alert($('div',window.top.document).text());//孙子取爷爷页面的属性，爷爷是最顶级的页面
alert("兄弟节点："+$('div',window.parent.frames["c1"].document).text());//兄弟页面取出兄弟节点的属性