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