我們在開發后台管理系統時可能會經常要跟 iframe 打交道，因為現在大部分后台管理系統都是頁面內嵌iframe，所以有時候兩者之間就難免要互相通信,但瀏覽器為了安全的原因，所以就禁止了不同域的訪問，所以現在我們就用一種簡單通俗的辦法解決這個問題：
a頁面和c頁面都是 www.aaa.com域名下的，b頁面是www.bbb.com域名下的，a頁面內嵌的iframe是b頁面，如果現在b頁面想調用a頁面的方法，那么就需要在b頁面動態創建一個iframe而這個iframe就是c頁面，c頁面需要和a頁面在同一個域名下，如下圖所示：
a.html頁面代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>www.aaa.com頁面下a.html</title> <script type="text/javascript"> function alerFun(){ alert('我是www.aaa.com域名下 a頁面的方法'); } </script> </head> <body> <div>www.aaa.con-------a.html</div><br> <iframe src="http://127.0.0.1/iframe/kuayu/b.html" name="myframe" width="500" height="100"></iframe> </body> </html>
b.html頁面代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>www.bbb.com域名下b頁面</title> <script type="text/javascript"> function creatFrame(){ if(typeof(oFrame)=='undefined'){ oFrame = document.createElement('iframe'); oFrame.src = 'http://localhost/iframe/kuayu/c.html'; oFrame.style.display = 'none'; document.body.appendChild(oFrame); }else{ oFrame.src = 'http://localhost/iframe/kuayu/c.html?' + Math.random(); } } </script> </head> <body> <div>www.bbb.con-------b.html</div> <div><input type="button" value="調用a頁面的方法" onclick="creatFrame()"></div> </body> </html>
c.html頁面代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>www.aaa.com頁面下c.html</title> </head> <body> <script type="text/javascript"> parent.parent.alerFun(); </script> </body> </html>
c頁面其實就是一個自執行函數，當創建這個頁面時就會自動執行同域下a頁面里的函數，所以我們就可以在b頁面通過中間層C頁面來調用父框架a頁面的方法了~
效果圖如下：
同理如果想讓a頁面調用b頁面的方法也是如此，剩下的就自己動手試試吧~