資訊專(zhuān)欄INFORMATION COLUMN
摘要：簡(jiǎn)介一個(gè)利用的跨域解決一個(gè)系統(tǒng)中，多個(gè)跨域通信交互的庫(kù)。然而各系統(tǒng)采用了不同的域名，與主框架系統(tǒng)和其它業(yè)務(wù)系統(tǒng)有跨域問(wèn)題若將所有域名改為同一域名下可能會(huì)產(chǎn)生一些系統(tǒng)間頁(yè)面元素和樣式的沖突故采用了標(biāo)準(zhǔn)下的來(lái)解決該問(wèn)題。
簡(jiǎn)介
一個(gè)利用html5的跨域api postMessage解決一個(gè)系統(tǒng)中，多個(gè)iframe跨域通信交互的js庫(kù)。
github地址 ：cross-domain
背景最初公司只有一個(gè)系統(tǒng)來(lái)做銷(xiāo)售，隨著公司業(yè)務(wù)越來(lái)越多，搭建很多類(lèi)似的系統(tǒng)（這些系統(tǒng)本來(lái)是沒(méi)有任何關(guān)系的，每個(gè)系統(tǒng)目前都非常復(fù)雜）。
由于目前公司戰(zhàn)略有調(diào)整，原來(lái)的銷(xiāo)售是針對(duì)某種產(chǎn)品，現(xiàn)在銷(xiāo)售工作要針對(duì)客戶進(jìn)行多產(chǎn)品的銷(xiāo)售促成，這樣一個(gè)銷(xiāo)售人員就需要打開(kāi)各種系統(tǒng)進(jìn)行業(yè)務(wù)操作，非常不方便，而且銷(xiāo)售數(shù)據(jù)間不能有效傳遞，所就需要把各個(gè)不相關(guān)的系統(tǒng)整合在一起，實(shí)現(xiàn)跨業(yè)務(wù)線銷(xiāo)售和數(shù)據(jù)共享。若將這想要將這些復(fù)雜系統(tǒng)整合在一起，無(wú)論是從人力物力上都是不太可能接受的。
所以選擇了使用iframe將各系統(tǒng)嵌入一個(gè)框架系統(tǒng)，各系統(tǒng)從物理上還是分開(kāi)不變，而從邏輯上（從用戶角度看就是一個(gè)系統(tǒng)）看起來(lái)是一個(gè)系統(tǒng)。
然而各系統(tǒng)采用了不同的域名，與主框架系統(tǒng)和其它業(yè)務(wù)系統(tǒng)有跨域問(wèn)題（若將所有域名改為同一域名下可能會(huì)產(chǎn)生一些系統(tǒng)間頁(yè)面元素和樣式的沖突）
故采用了HTML5標(biāo)準(zhǔn)下的postMessage來(lái)解決該問(wèn)題。
介紹示意圖
http://a.com 是最外層主系統(tǒng)的頁(yè)面，為master
http://b.com 和 http://c.com 為被嵌入的子系統(tǒng)slave，當(dāng)然也可以嵌入N個(gè)子系統(tǒng)
master和slave都是有各自的域名，由于瀏覽器的安全限定，兩個(gè)iframe正常是不能進(jìn)行數(shù)據(jù)交換和api調(diào)用的。當(dāng)然有一些特殊方法如jsonp,iframe name等。如果想了解，可以看看我的另一篇文章jsonp實(shí)現(xiàn)原理 。
在HTML5中新增了postMessage方法，postMessage可以實(shí)現(xiàn)跨文檔消息傳輸（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。postMessage api詳細(xì)介紹，請(qǐng)查看 postMessage
示意圖如下：
https://raw.githubusercontent...
js庫(kù)提供了簡(jiǎn)潔的調(diào)用和提供接口的方法，介紹如下
接口調(diào)用（向其它iframe發(fā)送數(shù)據(jù)）
/**
* 發(fā)送消息方法
* @param {String} componentName組件名稱(chēng)
* @param {String} method接口名稱(chēng)（對(duì)方通過(guò)API extends提供的接口名）
* @param {Object} data數(shù)據(jù)
* @param {Function} callback回調(diào)
*/
send : function(componentName,method,data,callback,type);
提供接口（提供前端接口，可供其它iframe調(diào)用）
/**
* 擴(kuò)展接口方法,供調(diào)用方send方法調(diào)用
* @param {String} name接口名稱(chēng)
* @param {Function} fun 接口方法
*/
extends : function(name,fun);
例子
Master代碼如下
啟動(dòng)http服務(wù)，http://localhost/cross-domain...
Test Page
Test Page MASTER
Slave1
啟動(dòng)http服務(wù)，http://127.0.0.1/cross-domain...
slave1
I am salve1 frame
Slave2
啟動(dòng)http服務(wù)，http://127.0.0.1/cross-domain...
slave2
I am slave2 frame
交互效果
應(yīng)用案例某企業(yè)作業(yè)系統(tǒng)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95831.html
摘要：在中，在不同的域名下面進(jìn)行數(shù)據(jù)交互，就會(huì)遇到跨域問(wèn)題，說(shuō)到跨域首先要從同源說(shuō)起，瀏覽器為了提供一種安全的運(yùn)行環(huán)境，各個(gè)瀏覽器廠商協(xié)定使用同源策略。在上面說(shuō)過(guò)是不受同源策略限制的，但是出于安全原因，瀏覽器限制從腳本內(nèi)發(fā)起的跨源請(qǐng)求。 對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)跨域應(yīng)該是最不陌生的問(wèn)題了，無(wú)論是開(kāi)發(fā)過(guò)程中還是在面試過(guò)程中都是一個(gè)經(jīng)常遇到的一個(gè)問(wèn)題，在開(kāi)發(fā)過(guò)程中遇到這個(gè)問(wèn)題的話一般都是找后端同學(xué)去解決...
摘要：四傳遞信息給父頁(yè)面參考跨域子頁(yè)面?zhèn)鹘o父頁(yè)面父頁(yè)面代碼崔渙測(cè)試父頁(yè)面參數(shù)中有屬性，就是父窗口發(fā)送過(guò)來(lái)的數(shù)據(jù)把父窗口發(fā)送過(guò)來(lái)的數(shù)據(jù)顯示在子窗口中。五簡(jiǎn)單分析和安全問(wèn)題傳送過(guò)來(lái)的信息如下圖，幾乎包含了所有應(yīng)該有的信息。 背景：由于同源策略存在，javascript的跨域一直都是一個(gè)棘手的問(wèn)題。父頁(yè)面無(wú)法直接獲取iframe內(nèi)部的跨域資源；同時(shí)，iframe內(nèi)部的跨域資源也無(wú)法將信息直接傳遞給...
摘要：開(kāi)發(fā)者需要在中設(shè)置屬性為跨域是的簡(jiǎn)稱(chēng)這是一種利用瀏覽器漏洞解決跨域的辦法腳本元素可以不受瀏覽器同源策略的限制。 什么是瀏覽器同源策略? 同源是指,域名,協(xié)議,端口號(hào)均相同,如圖: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1雖然都指向本機(jī),但也是跨域. 瀏覽器同源策略(...
閱讀 3734·2021-11-15 11:38
閱讀 2873·2021-11-11 16:55
閱讀 2682·2021-11-08 13:22
閱讀 2902·2021-11-02 14:45
閱讀 1424·2021-09-28 09:35
閱讀 2902·2021-09-10 10:50
閱讀 550·2019-08-30 15:44
閱讀 2932·2019-08-29 17:06
