华东15选5不开奖

iframe跨域通信封裝詳解

iframe跨域通信封裝詳解,由于前端javascript對跨域訪問做了安全限制,所以javascript只能訪問與包含它的文檔在同一域名下的內容,接下來,小編通過此篇文章給大家介紹iframe跨域通信的封裝,需要的朋友可以參考下
關鍵字:iframe跨域、iframe跨域訪問

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

復制代碼 代碼如下:

<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配置代理頁面地址

復制代碼 代碼如下:

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

华东15选5不开奖
冰球规则 华东15选539期预测 河南十一选五开奖走势图百度乐彩网 手机体球网 iphone手机捕鱼达人技巧 疯狂快速赛车 秒速飞艇人工计划 北单比分怎么计算的 大V彩苹果 新疆18选7的开奖号码