在今年的baidu salon分享會上黃方榮主講的《WEB數(shù)據(jù)交互的藝術(shù)》中提到一個非常優(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域名下的頁面index.htm中內(nèi)嵌了一個iframe頁 面,iframe內(nèi)引用的是B域名的sub-index.htm頁面,但是為了避免出現(xiàn)在index.htm頁面中出現(xiàn)滾動條,我們需要明確知道sub- index.htm頁面的高度和寬度,可是sub-index.htm的頁面內(nèi)容是不可控的,可能會根據(jù)不同用戶頁面大小會不一樣;問題就是如何把 sub-index.htm頁面的高度和寬度傳遞給index.htm頁面?
具體解決:
1、在index.htm頁面中聲明一個js函數(shù)process(height, width);用來實現(xiàn)設(shè)置頁面內(nèi)iframe的高度和寬度;
2、 在sub-index.htm頁面中再內(nèi)嵌一個隱藏的iframe,iframe的src指向A域名下的頁面ex.htm?height=xx& width=yy,該頁面沒有任何內(nèi)容,只是用來傳遞sub-index.htm頁面加載完之后的寬度和高度這兩個數(shù)據(jù)的,頁面內(nèi)js拿到request 中的參數(shù)之后直接調(diào)用parent.parent.process(height, width);完成對父頁面寬度和高度的設(shè)置;
看如下的這個時序圖: