對iframe跨域通訊的封裝

github源碼:https://github.com/boycy815/topProxyhtml

爲了偷懶因此依賴了Kissy:http://docs.kissyui.com/git

用法舉例:
需求是在http://www.demo.org/top.html中經過iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe頁面中但願經過點擊一個按鈕,調用top頁面的一個js方法。
1. 在top頁面中創建方法供內部頁面使用github

function testFun (text) {
    alert(text);
}

2. 在http://www.demo.org/top.html中嵌入iframe跨域

<iframe width="320" height="240" src="http://www.iframe.com/iframe.html"></iframe>

3. 創建www.demo.org域下創建一個代理頁面http://www.demo.org/proxy.html用於跨域通訊使用
4. 在http://www.demo.org/proxy.html加入用於代理頁面的邏輯
5. 在http://www.iframe.com/iframe.html頁面中經過js配置代理頁面地址app

TopProxyConfig = {url:'http://www.demo.org/proxy.html'};

6. 經過kissy加載通訊模塊ui

KISSY.use('topproxy', function(S, TopProxy){
//執行代碼
});

7. 在http://www.iframe.com/iframe.html經過TopProxy.call直接訪問http://www.demo.org/top.html中的方法,如url

KISSY.use('topproxy', function(S, TopProxy){
    TopProxy.call('testFun', '這是一個真實的故事');
});

其中call方法的第一個參數是外部網頁的全局方法名,支持「.」,後面參數無限個,均傳到目標方法裏去。spa

注:
1. 調用後可能不會當即執行,會等到iframe加載完畢後才觸發,若是想預加載能夠提早執行一個沒用的方法。
2. 若是不設置TopProxyConfig,那麼會認爲引用iframe和父iframe同域(大域)並直接調用top對象。
3. 在IE678下可能直接調用top中的系統方法會報錯,因爲系統方法不支持apply。代理

原理:
A頁面嵌日的iframe頁面B,其中B想調用A的方法並傳遞數據,那麼可在B中嵌入A頁面同域下的一個iframe頁面C,C能夠經過window.top訪問到A的window。那麼在B中能夠改變C的href的hash向C傳遞一些信息,而後C再把這些信息傳遞給A,從而間接達到B給A傳遞信息的目的。code

相關文章
相關標籤/搜索