跨域 Iframe 通信解决方案（兼容 IE 系列浏览器。）

 

实现思路：

     1、postMessage(IE8+, Firefox 3.1+, Opera 9+, Safari, and Chrome)

     2、利用window.navigator共享信息,使支持IE6,IE7

                i、父窗口向子窗口iframe发送信息：

               document.getElementById("childiframe").contentWindow .postMessage(
                   "我是父窗口",
                   "http://child.com:8080"   //可以*通配符代替，表示支持所有域
               ); 

                       上面的代码表示父窗口向子iframe:childiframe，域名为"http://child.com:8080"  发送 "我是父窗口"的消息

 

                 ii、子iframe

               window.addEventListener("message", function( event ) { 
		      // 把父窗口发送过来的数据显示在子窗口中
	             document.getElementById("content").innerHTML+=event.data+"<br/>"; 
	       }, false ); 

                  iii、父窗口如果有多个子iframe,那么父窗口可以向多个子窗口发送消息

                        利用Object-orient-programing  ，父窗口和多个子窗口分别实例化一个Message对象，各个窗口的message对象里开辟一个内存可以保存多个目标对象Target，意思是要发送消息到这些目标，

                         Target对象实现自己的send方法 ,send考虑到浏览器的兼容性，Target对象里保存了target和name信息，target表示要发送的窗口,name是发送目标的名称 ,name的作用仅仅是支持IE6、7中使用到（在window.navigator标示一个唯一send的回调函数）   

     var prefix = "arale-messenger",
        supportPostMessage = 'postMessage' in window; 
    // Target 类, 消息对象
    function Target(target, name){
        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;
    }

    // 往 target 发送消息, 出于安全考虑, 发送消息会带上前缀
    if ( supportPostMessage ){
        // IE8+ 以及现代浏览器支持
        Target.prototype.send = function(msg){
            this.target.postMessage(prefix + msg, '*');
        };
    } else {
        // 兼容IE 6/7  利用window.navigator共享信息,使支持IE6,IE7
        Target.prototype.send = function(msg){
            var targetFunc = window.navigator[prefix + this.name];
            if ( typeof targetFunc == 'function' ) {
                targetFunc(prefix + msg, window);
            } else {
                throw new Error("target callback function is not defined");
            }
        };
    }

              iiii: 每个窗口都实例化的Message类：

                targets 里保存目标发送对象，name当前窗口的名字，最后会传给Target,也是只在兼容IE6、7中用到。

                listenFunc ：保存监听的回调，一个页面可以实现多个监听。

                initListen ：ie6、7中保存全局回调函数，以方便在Target的send中触发

                                IE8+和现代化浏览器中监听message事件。

    // 信使类
    // 创建Messenger实例时指定, 必须指定Messenger的名字, (可选)指定项目名, 以避免Mashup类应用中的冲突
    // !注意: 父子页面中projectName必须保持一致, 否则无法匹配
    function Messenger(messengerName, projectName){
        this.targets = {};
        this.name = messengerName;
        this.listenFunc = [];
        prefix = projectName || prefix;
        this.initListen();
    }

    // 添加一个消息对象
    Messenger.prototype.addTarget = function(target, name){
        var targetObj = new Target(target, name);
        this.targets[name] = targetObj;
    };

    // 初始化消息监听
    Messenger.prototype.initListen = function(){
        var self = this;
        var generalCallback = function(msg){
            if(typeof msg == 'object' && msg.data){
                msg = msg.data;
            }
            // 剥离消息前缀
            msg = msg.slice(prefix.length);
            for(var i = 0; i < self.listenFunc.length; i++){
                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[prefix + this.name] = generalCallback;
        }
    };

    // 监听消息
    Messenger.prototype.listen = function(callback){
        this.listenFunc.push(callback);
    };
    // 注销监听
    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);
            }
        }
    };

 

    完整demo:

   

     完整代码：

     message.js

(function(w){
    // 消息前缀, 建议使用自己的项目名, 避免多项目之间的冲突
    var prefix = "arale-messenger",
        supportPostMessage = 'postMessage' in window;

    // Target 类, 消息对象
    function Target(target, name){
        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;
    }

    // 往 target 发送消息, 出于安全考虑, 发送消息会带上前缀
    if ( supportPostMessage ){
        // IE8+ 以及现代浏览器支持
        Target.prototype.send = function(msg){
            this.target.postMessage(prefix + msg, '*');
        };
    } else {
        // 兼容IE 6/7
        Target.prototype.send = function(msg){
            var targetFunc = window.navigator[prefix + this.name];
            if ( typeof targetFunc == 'function' ) {
                targetFunc(prefix + msg, window);
            } else {
                throw new Error("target callback function is not defined");
            }
        };
    }

    // 信使类
    // 创建Messenger实例时指定, 必须指定Messenger的名字, (可选)指定项目名, 以避免Mashup类应用中的冲突
    // !注意: 父子页面中projectName必须保持一致, 否则无法匹配
    function Messenger(messengerName, projectName){
        this.targets = {};
        this.name = messengerName;
        this.listenFunc = [];
        prefix = projectName || prefix;
        this.initListen();
    }

    // 添加一个消息对象
    Messenger.prototype.addTarget = function(target, name){
        var targetObj = new Target(target, name);
        this.targets[name] = targetObj;
    };

    // 初始化消息监听
    Messenger.prototype.initListen = function(){
        var self = this;
        var generalCallback = function(msg){
            if(typeof msg == 'object' && msg.data){
                msg = msg.data;
            }
            // 剥离消息前缀
            msg = msg.slice(prefix.length);
            for(var i = 0; i < self.listenFunc.length; i++){
                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[prefix + this.name] = generalCallback;
        }
    };

    // 监听消息
    Messenger.prototype.listen = function(callback){
        this.listenFunc.push(callback);
    };
    // 注销监听
    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);
            }
        }
    };

    w["Messenger"]=Messenger;
})(window);

 child.html:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="message.js"></script>
    <script>
	window.onload=function(){
	    var messenger = new Messenger('iframe1', 'MessengerProject');
		messenger.addTarget(window.parent, 'parent');
        messenger.targets['parent'].send('发给父页面的消息');
		messenger.listen(function(msg) {
		    document.getElementById("msg").innerHTML=msg;
		});
    }
	</script>
  </head>
  <body>
      child
	  <div id="msg"></div>
  </body>
</html> 

 parent.html

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="message.js"></script>
	<script>
	window.onload=function(){
	    var messenger = new Messenger('parent', 'MessengerProject');
		var iframe1=window.iframe1;
		messenger.addTarget(iframe1.contentWindow, 'iframe1');
		messenger.targets['iframe1'].send('发给子页面1的消息');
		messenger.listen(function(msg) {
			document.getElementById("msg").innerHTML=msg;
		});
    }
	</script>
  </head>
  <body>
      parent
	  	  <div id="msg"></div>
	  <iframe id="iframe1" src="child.html" width=100 height=100>
  </body>
</html>