摘要：剛來(lái)公司時(shí)做得第一個(gè)項(xiàng)目是跨部門合作，使用了來(lái)做通信，十分簡(jiǎn)單，代碼不長(zhǎng)，這里分析一下間通信的實(shí)現(xiàn)方式源碼消息前綴建議使用自己的項(xiàng)目名避免多項(xiàng)目之間的沖突注意消息前綴應(yīng)使用字符串類型類消息對(duì)象往發(fā)送消息出于安全考慮發(fā)送消息會(huì)帶上前綴

剛來(lái)公司時(shí)做得第一個(gè)項(xiàng)目是跨部門合作，使用了MessengerJS來(lái)做通信，十分簡(jiǎn)單，MessengerJS代碼不長(zhǎng)，這里分析一下iframe間通信的實(shí)現(xiàn)方式

源碼

/**
 *     __  ___
 *    /  |/  /___   _____ _____ ___   ____   ____ _ ___   _____
 *   / /|_/ // _  / ___// ___// _  / __  / __ `// _  / ___/
 *  / /  / //  __/(__  )(__  )/  __// / / // /_/ //  __// /
 * /_/  /_/ \___//____//____/ \___//_/ /_/ \__, / \___//_/
 *                                        /____/
 *
 * @description MessengerJS, a common cross-document communicate solution.
 * @author biqing kwok
 * @version 2.0
 * @license release under MIT license
 */

window.Messenger = (function(){

    // 消息前綴, 建議使用自己的項(xiàng)目名, 避免多項(xiàng)目之間的沖突
    // !注意 消息前綴應(yīng)使用字符串類型
    var prefix = "[PROJECT_NAME]",
        supportPostMessage = "postMessage" in window;

    // Target 類, 消息對(duì)象
    function Target(target, name, prefix){
        var errMsg = "";
        if(arguments.length < 2){
            errMsg = "target error - target and name are both required";
        } else if (typeof target != "object"){
            errMsg = "target error - target itself must be window object";
        } else if (typeof name != "string"){
            errMsg = "target error - target name must be string type";
        }
        if(errMsg){
            throw new Error(errMsg);
        }
        this.target = target;
        this.name = name;
        this.prefix = prefix;
    }

    // 往 target 發(fā)送消息, 出于安全考慮, 發(fā)送消息會(huì)帶上前綴
    if ( supportPostMessage ){
        // IE8+ 以及現(xiàn)代瀏覽器支持
        Target.prototype.send = function(msg){
            this.target.postMessage(this.prefix + "|" + this.name + "__Messenger__" + msg, "*");
        };
    } else {
        // 兼容IE 6/7
        Target.prototype.send = function(msg){
            var targetFunc = window.navigator[this.prefix + this.name];
            if ( typeof targetFunc == "function" ) {
                targetFunc(this.prefix + msg, window);
            } else {
                throw new Error("target callback function is not defined");
            }
        };
    }

    // 信使類
    // 創(chuàng)建Messenger實(shí)例時(shí)指定, 必須指定Messenger的名字, (可選)指定項(xiàng)目名, 以避免Mashup類應(yīng)用中的沖突
    // !注意: 父子頁(yè)面中projectName必須保持一致, 否則無(wú)法匹配
    function Messenger(messengerName, projectName){
        this.targets = {};
        this.name = messengerName;
        this.listenFunc = [];
        this.prefix = projectName || prefix;
        this.initListen();
    }

    // 添加一個(gè)消息對(duì)象
    Messenger.prototype.addTarget = function(target, name){
        var targetObj = new Target(target, name,  this.prefix);
        this.targets[name] = targetObj;
    };

    // 初始化消息監(jiān)聽
    Messenger.prototype.initListen = function(){
        var self = this;
        var generalCallback = function(msg){
            if(typeof msg == "object" && msg.data){
                msg = msg.data;
            }
            
            var msgPairs = msg.split("__Messenger__");
            var msg = msgPairs[1];
            var pairs = msgPairs[0].split("|");
            var prefix = pairs[0];
            var name = pairs[1];

            for(var i = 0; i < self.listenFunc.length; i++){
                if (prefix + name === self.prefix + self.name) {
                    self.listenFunc[i](msg);
                }
            }
        };

        if ( supportPostMessage ){
            if ( "addEventListener" in document ) {
                window.addEventListener("message", generalCallback, false);
            } else if ( "attachEvent" in document ) {
                window.attachEvent("onmessage", generalCallback);
            }
        } else {
            // 兼容IE 6/7
            window.navigator[this.prefix + this.name] = generalCallback;
        }
    };

    // 監(jiān)聽消息
    Messenger.prototype.listen = function(callback){
        var i = 0;
        var len = this.listenFunc.length;
        var cbIsExist = false;
        for (; i < len; i++) {
            if (this.listenFunc[i] == callback) {
                cbIsExist = true;
                break;
            }
        }
        if (!cbIsExist) {
            this.listenFunc.push(callback);
        }
    };
    // 注銷監(jiān)聽
    Messenger.prototype.clear = function(){
        this.listenFunc = [];
    };
    // 廣播消息
    Messenger.prototype.send = function(msg){
        var targets = this.targets,
            target;
        for(target in targets){
            if(targets.hasOwnProperty(target)){
                targets[target].send(msg);
            }
        }
    };

    return Messenger;
})();

下面主要分析代碼結(jié)構(gòu)

用來(lái)檢測(cè)當(dāng)前瀏覽器是否支持postMessage

postMessage是HTML5引入的通信API，它可以避開同源策略的限制，實(shí)現(xiàn)安全的跨域通信

向外界窗口發(fā)送消息

otherWindow.postMessage(message, targetOrigin);

otherWindow: 指目標(biāo)窗口，也就是給哪個(gè)window發(fā)消息，是 window.frames 屬性的成員或者由 window.open 方法創(chuàng)建的窗口

message: 是要發(fā)送的消息，類型為 String、Object (IE8、9 不支持)，一般使用json數(shù)據(jù)

targetOrigin: 是限定消息接收范圍，協(xié)議+主機(jī)+端口號(hào)[+URL]，URL會(huì)被忽略，所以可以不寫，不限制請(qǐng)使用 ‘*’

接受信息的message事件

var onmessage = function (event) {
    var data = event.data;
    var origin = event.origin;
    //do someing
};
if (typeof window.addEventListener != "undefined") {
    window.addEventListener("message", onmessage, false);
} else if (typeof window.attachEvent != "undefined") {
    //for ie
    window.attachEvent("onmessage", onmessage);
}

注意：ie6/7不支持postMessage，因此在ie6/7中跨域通信通常使用window.name

window.name的美妙之處：name 值在不同的頁(yè)面（甚至不同域名）加載后依舊存在，并且可以支持非常長(zhǎng)的 name 值（2MB）

window.navigator有與window.name類似的特性，而且可以保存回調(diào)方法

MessengerJS的實(shí)現(xiàn)思路是高級(jí)瀏覽器使用postMessage，不支持postMessage的使用window.navigator來(lái)保存回調(diào)方法

消息類，發(fā)送執(zhí)行者

function Target(target, name){
    this.target = target;
    this.name = name;
}

Target.prototype.send = function(msg){
    // 發(fā)送消息
};

信使類，創(chuàng)建多個(gè)消息對(duì)象，注冊(cè)多個(gè)監(jiān)聽事件，每一個(gè)消息對(duì)象的廣播消息會(huì)被這個(gè)信使類下面的所有監(jiān)聽事件接收到

function Messenger(messengerName, projectName){
    this.targets = {};
    this.name = messengerName;
    this.listenFunc = [];
    this.initListen();
}

// 添加一個(gè)消息對(duì)象
Messenger.prototype.addTarget = function(target, name){};

// 初始化消息監(jiān)聽
Messenger.prototype.initListen = function(){};

// 監(jiān)聽消息
Messenger.prototype.listen = function(callback){};

// 注銷監(jiān)聽
Messenger.prototype.clear = function(){};

// 廣播消息
Messenger.prototype.send = function(msg){};

實(shí)現(xiàn)邏輯是：

initListen方法初始化，將generalCallback回調(diào)方法注冊(cè)到message監(jiān)聽中

addTarget將消息對(duì)象添加到targets對(duì)象中

listen方法將監(jiān)聽方法添加到listenFunc數(shù)組中

send方法執(zhí)行每一個(gè)target對(duì)象的send方法

target對(duì)象的send方法執(zhí)行，觸發(fā)了message監(jiān)聽，觸發(fā)了generalCallback的執(zhí)行，從而執(zhí)行了listenFunc數(shù)組中的方法

在postMessage的注冊(cè)回調(diào)方法里加了一個(gè)回調(diào)方法組listenFunc

在postMessage的監(jiān)聽觸發(fā)方法外加了一層集體觸發(fā)對(duì)象targets

從而達(dá)到了廣播的效果

postMessage本身可以實(shí)現(xiàn)廣播的效果，但是MessengerJS為了兼容，限制了postMessage的能力，自行實(shí)現(xiàn)了廣播

MessengerJS來(lái)做iframe通信解決的最常見的問題是，在主頁(yè)面為iframe留足高度

parent頁(yè)面

var messenger = new Messenger("parent");
    var iframe = document.getElementById("iframepage");
    messenger.addTarget(iframe.contentWindow, "iframe");

    messenger.listen(function (msg) {
        var result = parseInt(msg, 10) + 20;

        if (result < mainWindowHeight) {
            result = mainWindowHeight;
        }
        $("#iframepage").height(result);
});

iframe頁(yè)面

// iframe跨域傳數(shù)據(jù)
var messenger = new Messenger("iframe");
messenger.addTarget(window.parent, "parent"); 

// 跨域傳main 高度
var height = $(".main").height();
messenger.targets["parent"].send(height);

messenger.listen(function (msg) {

});

postMessage是一個(gè)用于安全的使用跨源通信的方法，幫助web開發(fā)回歸正軌

MessengerJS實(shí)現(xiàn)效果很好，即便做頻繁的交互，也不會(huì)有明顯的卡頓，不過時(shí)代在進(jìn)步，以后可能會(huì)很少用到這樣的兼容了

官方博文看這里：MessengerJS

本文轉(zhuǎn)載自筆者個(gè)人博客：Gaoxuefeng"s Blog