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è)面使用
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域下建立一個(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è)面地址
TopProxyConfig = {url:'http://www.demo.org/proxy.html'};
6. 通過(guò)kissy加載通信模塊
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)文章
Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類(lèi)列表管理(下)
本文將采用Jquery+Ajax+PHP+MySQL來(lái)實(shí)現(xiàn)一個(gè)客戶分類(lèi)列表的管理,如何利用Ajax和Json技術(shù)讓用戶操作起來(lái)覺(jué)得更輕松,感興趣的小伙伴們可以參考一下2015-10-10jquery關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼
jquery 關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-01-01jQuery Validate表單驗(yàn)證插件 添加class屬性形式的校驗(yàn)
這篇文章主要介紹了jQuery Validate表單驗(yàn)證插件,在class屬性中添加校驗(yàn)規(guī)則進(jìn)行簡(jiǎn)單的校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01jquery 注意事項(xiàng)與常用語(yǔ)法小結(jié)
jquery 注意事項(xiàng)與常用語(yǔ)法小結(jié),學(xué)習(xí)jquery的朋友最好收藏下。2010-06-06jQuery插件DataTables分頁(yè)開(kāi)發(fā)心得體會(huì)
這篇文章主要為大家分享了jQuery插件DataTables分頁(yè)開(kāi)發(fā)心得體會(huì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)左側(cè)在線客服效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)左側(cè)在線客服效果代碼,涉及簡(jiǎn)單的jQuery頁(yè)面動(dòng)畫(huà)顯示與隱藏效果實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-10-10JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)導(dǎo)航出現(xiàn)下拉菜單切換的效果,非常簡(jiǎn)潔自然,涉及jquery鼠標(biāo)hover事件及頁(yè)面元素樣式的動(dòng)態(tài)改變技巧,需要的朋友可以參考下2015-08-08