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

時間 2019-11-08

標籤利用 html5 html postmessage 解決 iframe 問題 cross domain.js domain 使用簡單欄目 HTML5 简体版

原文原文鏈接

簡介

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

github地址：cross-domainhtml

背景

最初公司只有一個系統來作銷售，隨着公司業務愈來愈多，搭建不少相似的系統（這些系統原本是沒有任何關係的，每一個系統目前都很是複雜）。前端

因爲目前公司戰略有調整，原來的銷售是針對某種產品，如今銷售工做要針對客戶進行多產品的銷售促成，這樣一個銷售人員就須要打開各類系統進行業務操做，很是不方便，並且銷售數據間不能有效傳遞，所就須要把各個不相關的系統整合在一塊兒，實現跨業務線銷售和數據共享。若將這想要將這些複雜系統整合在一塊兒，不管是從人力物力上都是不太可能接受的。html5

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

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

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

介紹

示意圖

http://a.com 是最外層主系統的頁面，爲master
http://b.com 和 http://c.com 爲被嵌入的子系統slave，固然也能夠嵌入N個子系統

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

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

示意圖以下：
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...

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--引入js庫-->
    <script type="text/javascript" src="../src/cross-domain.js"></script>
</head>
<body>
    Test Page MASTER
    <button onclick="sendMesg1()">send data to Slave1</button>
    <button onclick="sendMesg2()">send data to Slave2</button>
    <br/>
    <!--slave1-->
    <iframe src="http://127.0.0.1/cross-domain/example/slave1.html" name="SLAVE1" id="SLAVE1"></iframe>
    <!--slave2-->
    <iframe src="http://127.0.0.1/cross-domain/example/slave2.html" name="SLAVE2" id="SLAVE2"></iframe>
    <div id="content"></div>
</body>

<script type="text/javascript">
    var me = CD.component.name;
    function genInfo(name){
        return {info : "Hello [" + name + "] , I am [" + me + "] Now at " + new Date()};
    }
    //調用SLAVE2的changeSlave1前端接口，接口參數爲genInfo("SLAVE1")
    function sendMesg1 (argument) {
        CD.send("SLAVE1" , "changeSlave1" ,genInfo("SLAVE1") ,function(data){
            console.log("callback fire");
            writeHtml(data);
        });
    }
    //調用SLAVE2的changeSlave2前端接口，接口參數爲genInfo("SLAVE2")
    function sendMesg2 (argument) {
        CD.send("SLAVE2" , "changeSlave2" , genInfo("SLAVE2"));
    }
    //MASTER提供接口，可供SLAVE1和SLAVE2調用
    CD.extends("changeMaster" , function(data){
        writeHtml(data.info);
    });
    //當SLAVE1和SLAVE2調用changeMaster接口時，會打印在MASTER的頁面中
    function writeHtml(text){
        var content = document.getElementById("content");
        content.innerHTML += "<br/>" + text;
    }
    console.log(CD);
</script>
</html>

Slave1

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

<!DOCTYPE html>
<html>
<head>
    <title>slave1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../src/cross-domain.js"></script>
</head>
<body>
    <div id="main">
        I am salve1 frame
        <button onclick="sendMesg()">send data</button>
    </div>
    <div id="content"></div>
</body>
<script type="text/javascript">
    var me = CD.component.name;
    function genInfo(name){
        return {info : "Hello [" + name + "] , I am [" + me + "] Now at " + new Date()};
    }
    //調用MASTER的changeMaster接口，數據爲genInfo("MESTER")
    function sendMesg (argument) {
        CD.send("MESTER" , "changeMaster" ,genInfo("MESTER"));
    }

    //提供前端接口changeSlave1，可供MASTER和其它SLAVE調用
    CD.extends("changeSlave1" , function(data){
        writeHtml(data.info);
        return "Slave1 changeSlave1 is called";
    });
    function writeHtml(text){
        var content = document.getElementById("content");
        content.innerHTML += "<br/>" + text;
    }
    console.log(CD);
</script>

</html>

Slave2

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

<!DOCTYPE html>
<html>
<head>
    <title>slave2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../src/cross-domain.js"></script>
</head>
<body>
    <div id="main">
        I am slave2 frame
        <button onclick="sendMesg()">send data</button>
    </div>
    <div id="content"></div>

</body>
<script type="text/javascript">
    var me = CD.component.name;
    function genInfo(name){
        return {info : "Hello [" + name + "] , I am [" + me + "] Now at " + new Date()};
    }
    //調用MASTER的changeMaster接口，數據爲genInfo("MESTER")
    function sendMesg (argument) {
        CD.send("MESTER" , "changeMaster" ,genInfo("MESTER"));
    }

    //提供前端接口changeSlave2，可供MASTER和其它SLAVE調用
    CD.extends("changeSlave2" , function(data){
        writeHtml(data.info);
    });
    function writeHtml(text){
        var content = document.getElementById("content");
        content.innerHTML += "<br/>" + text;
    }
    console.log(CD);
</script>
</html>