先上代碼：
父頁面.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();