欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

iframe跨域通信封裝詳解

 更新時(shí)間:2015年08月11日 15:21:44   作者:小夜 Clifford  
由于前端javascript對(duì)跨域訪問(wèn)做了安全限制,所以javascript只能訪問(wèn)與包含它的文檔在同一域名下的內(nèi)容,接下來(lái),小編通過(guò)此篇文章給大家介紹iframe跨域通信的封裝,需要的朋友可以參考下

iframe跨域通信

查看演示        源碼下載

眾所周知,由于前端javascript對(duì)跨域訪問(wèn)做了安全限制,javascript只能訪問(wèn)與包含它的文檔在同一域下的內(nèi)容。

用法舉例:

需求是在http://www.demo.org/top.html中通過(guò)iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe頁(yè)面中希望通過(guò)點(diǎn)擊一個(gè)按鈕,調(diào)用top頁(yè)面的一個(gè)js方法。

1. 在top頁(yè)面中建立方法供內(nèi)部頁(yè)面使用

復(fù)制代碼 代碼如下:

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

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

復(fù)制代碼 代碼如下:

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

3. 建立www.demo.org域下建立一個(gè)代理頁(yè)面http://www.demo.org/proxy.html用于跨域通信使用

4. 在http://www.demo.org/proxy.html加入用于代理頁(yè)面的邏輯

5. 在http://www.iframe.com/iframe.html頁(yè)面中通過(guò)js配置代理頁(yè)面地址

復(fù)制代碼 代碼如下:

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

6. 通過(guò)kissy加載通信模塊

復(fù)制代碼 代碼如下:

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

7. 在http://www.iframe.com/iframe.html通過(guò)TopProxy.call直接訪問(wèn)http://www.demo.org/top.html中的方法,如

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

其中call方法的第一個(gè)參數(shù)是外部網(wǎng)頁(yè)的全局方法名,支持“.”,后面參數(shù)無(wú)限個(gè),均傳到目標(biāo)方法里去。

注:

1. 調(diào)用后可能不會(huì)立即執(zhí)行,會(huì)等到iframe加載完畢后才觸發(fā),如果想預(yù)加載可以提前執(zhí)行一個(gè)沒(méi)用的方法。
2. 如果不設(shè)置TopProxyConfig,那么會(huì)認(rèn)為引用iframe和父iframe同域(大域)并直接調(diào)用top對(duì)象。
3. 在IE678下可能直接調(diào)用top中的系統(tǒng)方法會(huì)報(bào)錯(cuò),由于系統(tǒng)方法不支持apply。

原理:

A頁(yè)面嵌日的iframe頁(yè)面B,其中B想調(diào)用A的方法并傳遞數(shù)據(jù),那么可在B中嵌入A頁(yè)面同域下的一個(gè)iframe頁(yè)面C,C可以通過(guò)window.top訪問(wèn)到A的window。那么在B中可以改變C的href的hash向C傳遞一些信息,然后C再把這些信息傳遞給A,從而間接達(dá)到B給A傳遞信息的目的

相關(guān)文章

最新評(píng)論