先上代码：
父页面.html
<!DOCTYPE html> <html> <head> <title>父页面</title> </head> <body> <div id='parent'></div> <iframe id="FrameId" name="frameName" frameborder="0" width="100%" height="100%;" src="../list"></iframe> </body> <script type="text/javascript"> var flag=20; //获得子页面id=children的div //javascript var chiDiv=document.getElementById('FrameId').contentWindow.document.getElementById('children'); //jquery var chiDiv=$('#FrameId').contents().find('#children') //获得子页面js中的变量 var temp=document.frameName.temp; </script> </html>
子页面.html
<!DOCTYPE html> <html> <head> <title>子页面</title> </head> <body> <div id='children'></div> </body> <script type="text/javascript"> var temp=10; //获得父页面id=parent的div //javascript var parDiv=window.parent.document.getElementById('parent'); //jquery var parDiv=$(window.parent.document).find('#parent'); //获得父页面js中的变量 var flag=parent.flag; </script> </html>
一、父页面调用子页面
1、先得到子页面的document
document.getElementById('FrameId').contentWindow.document
2、得到子页面的window
document.getElementById('FrameId').contentWindow.window
重载子页面：document.getElementById('FrameId').contentWindow.window.location.reload(true);
或者 $('#FrameId').attr('src','../list');
3、得到子页面的的变量
doucment. iframe的name属性值 . 子页面变量名称 （document.frameName.temp）
二、子页面调用父页面
1、父页面document ： window.parent.document
2、获得父页面变量 ： parent.变量名称
3、调用事件 ： window.parent.XXX();