背景

如上圖所示，系統(tǒng)www.a.com/index.html頁面中嵌入一個iframe，iframe中訪問不同域的www.b.com/index.html

然后b中有個按鈕“保存”，想調(diào)用父頁面a.com/index.html中的一個js方法saveFavorite()

問題

iframe和父頁面如果是同一個域的，那問題很好辦，直接parent.saveFavorite()即可。

但問題難在是不同域，不同域是不允許相互訪問js代碼的。

解決方案

跨域的問題，也有不少的解決方案（參考：http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx），這里提供一種比較優(yōu)雅的

該圖要解決的問題說明如下：
在AAA.com域名下的index.htm頁面中內(nèi)嵌了BBB.com域名下的一個頁面index.htm，正常情況下iframe內(nèi)部的index.htm頁面是無法訪問父頁面index.htm中的任何dom對象或者js函數(shù)的，因為跨域，但我們經(jīng)常又需要做一些參數(shù)回傳的事情怎么辦呢？以上的這種實現(xiàn)方式就很好的解決了這個問題；

解決方案的關(guān)鍵優(yōu)雅之處在于：瀏覽器雖然會禁止js跨域訪問頁面中的對象，但對于iframe的層級關(guān)系引用并沒有做限制，即parent仍然可用；該方案就是利用了2層內(nèi)嵌iframe、使用第二級iframe中的頁面與parent.parent的頁面是同域名的關(guān)系，從而避免跨域問題實現(xiàn)兩個頁面間相關(guān)數(shù)據(jù)的傳遞，本質(zhì)上就是利用parent.parent實現(xiàn)對父父頁面中js的回調(diào)！

?

代碼

首先在A.com中定義一個crossDomain.html

<script type="text/javascript">window.onload = function () {moduleId = getParam("moduleId");conditions = getParam("conditions"); //這是就是去執(zhí)行頂層父頁面的js方法parent.parent.SaveFavorite(moduleId, "", "&conditions=" + conditions);}function getParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return (r[2]); return "";} </script>

然后再B.com/Index.html中，在按鈕單擊事件中添加如下代碼：

//別忘記，在index.html中添加一個隱藏的iframe，當(dāng)然你也可以通過js動態(tài)創(chuàng)建 <iframe id="myfarme" src="#" style="display:none;"></iframe> btnSaveApp: {tap: function () {win = this.getCdnWin();cdt = win.getValues();conditions = "&conditions=" + Ext.encode(cdt);//這里是核心 document.getElementById('myfarme').src="http://172.16.34.128/hzyapp/crossDomain.html?"+location.search.substring(1)+conditions; }}

這樣就可以順利在跨域的iframe中執(zhí)行父頁面的js方法了，而且可以傳遞參數(shù)，對父頁面的相關(guān)元素可以任意操作了，對用戶來說是非常友好的。

總結(jié)

以上是生活随笔為你收集整理的iframe中跨域页面访问parent的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。