當一個頁面使用了iframe作為嵌套時，如何想要將父頁面的數據傳給iframe子頁面，那iframe所指向的呢個子頁面是怎么獲取呢，又或者子頁面的數據要給父頁面使用，那么父頁面又如何獲取子頁面的數據呢？下面根據這種情況作了一個簡單的demo案例：
父頁面是parentPage.html，子頁面是childPage.html。
1、情況一：父頁面獲取子頁面傳入的數據（子頁面給父頁面傳值）
父頁面：
//獲取子頁面傳入的數據 function GetChildValue(obj){ document.getElementById('texts').innerText = obj; }
子頁面：
//給父頁面傳數據 var txt = '我是子界面主動傳值給父界面的數值'; parent.GetChildValue(txt); //GetValue是父界面的Js 方法
2、情況二：子頁面獲取父頁面的數據（父頁面給子頁面傳值）
父頁面：
//給子頁面傳入數據 function toChildValue(){ var txt = '這是父頁面給子頁面的數據'; return txt; }
子頁面：
//獲取父頁面傳來的數據 var getParentVule = window.parent.toChildValue(); console.log(getParentVule)
具體傳值的數據根據自己的項目要求修改，下面放上兩個頁面的完整代碼：
父頁面parentPage.htm
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父頁面</title> <style type="text/css"> .box{ width: 600px; height: 400px; margin: 10px auto; } h3{ font-size: 16px; } .cont{ width: 100%; } .cont h4{ font-size: 14px; } .cont #texts{ width: 100%; line-height: 22px; font-size: 13px; color: #2E2D3C; } iframe{ /*只是隱藏，但任然保留DOM結構*/ visibility: hidden; } </style> </head> <body> <div class="box"> <h3>這是父頁面</h3> <div class="cont"> <h4>這是從子頁面傳入的數據：</h4> <div id="texts"></div> <iframe src="childPage.html" width="1px" height="1px" class="myIframe" name="myIframe"></iframe> </div> </div> <script type="text/javascript"> //獲取子頁面傳入的數據 function GetChildValue(obj){ document.getElementById('texts').innerText = obj; } //給子頁面傳入數據 function toChildValue(){ var txt = '這是父頁面給子頁面的數據'; return txt; } </script> </body> </html>
子頁面childPage.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>子頁面</title> <style type="text/css"> .box{ width: 600px; height: 400px; margin: 10px auto; } h3{ font-size: 16px; } </style> </head> <body> <div class="box"> <h3>這是子頁面</h3> </div> <script type="text/javascript"> //給父頁面傳數據 var txt = '我是子界面主動傳值給父界面的數值'; parent.GetChildValue(txt); //GetValue是父界面的Js 方法 //獲取父頁面傳來的數據 var getParentVule = window.parent.toChildValue(); console.log(getParentVule) </script> </body> </html>