利用html5的postmessage解決iframe跨域問題的庫cross-domain.js，使

I_Am 發布于2019-08-22 18:25 / 2096人閱讀

摘要：簡介一個利用的跨域解決一個系統中，多個跨域通信交互的庫。然而各系統采用了不同的域名，與主框架系統和其它業務系統有跨域問題若將所有域名改為同一域名下可能會產生一些系統間頁面元素和樣式的沖突故采用了標準下的來解決該問題。

簡介

一個利用html5的跨域api postMessage解決一個系統中，多個iframe跨域通信交互的js庫。

github地址：cross-domain

背景

最初公司只有一個系統來做銷售，隨著公司業務越來越多，搭建很多類似的系統（這些系統本來是沒有任何關系的，每個系統目前都非常復雜）。

由于目前公司戰略有調整，原來的銷售是針對某種產品，現在銷售工作要針對客戶進行多產品的銷售促成，這樣一個銷售人員就需要打開各種系統進行業務操作，非常不方便，而且銷售數據間不能有效傳遞，所就需要把各個不相關的系統整合在一起，實現跨業務線銷售和數據共享。若將這想要將這些復雜系統整合在一起，無論是從人力物力上都是不太可能接受的。

所以選擇了使用iframe將各系統嵌入一個框架系統，各系統從物理上還是分開不變，而從邏輯上（從用戶角度看就是一個系統）看起來是一個系統。

然而各系統采用了不同的域名，與主框架系統和其它業務系統有跨域問題（若將所有域名改為同一域名下可能會產生一些系統間頁面元素和樣式的沖突）

故采用了HTML5標準下的postMessage來解決該問題。

介紹

示意圖

http://a.com 是最外層主系統的頁面，為master

http://b.com 和 http://c.com 為被嵌入的子系統slave，當然也可以嵌入N個子系統

master和slave都是有各自的域名，由于瀏覽器的安全限定，兩個iframe正常是不能進行數據交換和api調用的。當然有一些特殊方法如jsonp,iframe name等。如果想了解，可以看看我的另一篇文章jsonp實現原理。

在HTML5中新增了postMessage方法，postMessage可以實現跨文檔消息傳輸（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。postMessage api詳細介紹，請查看 postMessage

示意圖如下：
https://raw.githubusercontent...

提供的主要API

js庫提供了簡潔的調用和提供接口的方法，介紹如下

接口調用（向其它iframe發送數據）

        /**
         * 發送消息方法
         * @param {String} componentName組件名稱
         * @param {String} method接口名稱（對方通過API extends提供的接口名）
         * @param {Object} data數據
         * @param {Function} callback回調
         */
         send : function(componentName,method,data,callback,type);

提供接口（提供前端接口，可供其它iframe調用）

       /**
        * 擴展接口方法,供調用方send方法調用
        * @param {String} name接口名稱
        * @param {Function} fun 接口方法
        */
        extends : function(name,fun);

例子

Master代碼如下

啟動http服務，http://localhost/cross-domain...




    Test Page
    
    
    


    Test Page MASTER

Slave1

啟動http服務，http://127.0.0.1/cross-domain...




    slave1
    
    


    
        I am salve1 frame

Slave2

啟動http服務，http://127.0.0.1/cross-domain...




    slave2
    
    


    
        I am slave2 frame

交互效果

應用案例

某企業作業系統

GPU云服務器云服務器 iframe跨域利用html5的例子解決問題的方法 iframe載入數據問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95831.html

那些年曾談起的跨域

摘要：在中，在不同的域名下面進行數據交互，就會遇到跨域問題，說到跨域首先要從同源說起，瀏覽器為了提供一種安全的運行環境，各個瀏覽器廠商協定使用同源策略。在上面說過是不受同源策略限制的，但是出于安全原因，瀏覽器限制從腳本內發起的跨源請求。對于前端開發來說跨域應該是最不陌生的問題了，無論是開發過程中還是在面試過程中都是一個經常遇到的一個問題，在開發過程中遇到這個問題的話一般都是找后端同學去解決...

galois 2019-08-23 18:13 評論0 收藏0
postMessage處理iframe 跨域問題

摘要：四傳遞信息給父頁面參考跨域子頁面傳給父頁面父頁面代碼崔渙測試父頁面參數中有屬性，就是父窗口發送過來的數據把父窗口發送過來的數據顯示在子窗口中。五簡單分析和安全問題傳送過來的信息如下圖，幾乎包含了所有應該有的信息。背景：由于同源策略存在，javascript的跨域一直都是一個棘手的問題。父頁面無法直接獲取iframe內部的跨域資源；同時，iframe內部的跨域資源也無法將信息直接傳遞給...

cooxer 2019-08-19 17:42 評論0 收藏0
關于跨域簡單總結

摘要：開發者需要在中設置屬性為跨域是的簡稱這是一種利用瀏覽器漏洞解決跨域的辦法腳本元素可以不受瀏覽器同源策略的限制。什么是瀏覽器同源策略? 同源是指,域名,協議,端口號均相同,如圖: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1雖然都指向本機,但也是跨域. 瀏覽器同源策略(...

learning 2019-08-22 16:45 評論0 收藏0