iframe跨域通訊封裝詳解_jquery

iframe跨域通訊

查看示範        原始碼下載

眾所周知，由於前端javascript對跨網域存取做了安全限制，javascript只能存取與包含它的文件在同一網域下的內容。

用法舉例：

需求是在http://www.demo.org/top.html中透過iframe方式嵌入http://www.iframe.com/iframe.html，而在iframe頁面中希望透過點擊一個按鈕，呼叫top頁面的一個js方法。

1. 在top頁中建立方法供內部頁使用

複製程式碼 程式碼如下:

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

2. 在http://www.demo.org/top.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設定代理頁面位址

複製程式碼 程式碼如下:

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

6. 透過kissy載入通訊模組

複製程式碼 程式碼如下:

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

7. 在http://www.iframe.com/iframe.html透過TopProxy.call直接存取http://www.demo.org/top.html中的方法，如

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

其中call方法的第一個參數是外部網頁的全域方法名，支援“.”，後面參數無限個，均傳到目標方法裡去。

註：

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傳遞訊息的目的