在IFRAME中进行跨域通讯

          HTML5中新引进的window.postMessage方法来跨域传送数据 

        window.postMessage(message,targetOrigin)  方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、 FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类 型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 *  。

需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。

上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。在讨论第二种方法 的时候,我们说过,不同域的框架间是可以获取到对方的window对象的,而且也可以使用window.postMessage这个方法.

        1、主页面

<script>
window.addEventListener('message',function(e){
     var data = e.data;
     alert(data.msg);
},false);

$(document).ready(function(){
var iframe=window.frames[0];
result .key="test";
result.msg= "1111";
iframe.postMessage(result,'*');
})
</script>
<body>
<iframe id="gameFrame" name="gameFrame" src="${url!}" height="'+h+'" width="'+w+'" frameborder="no" border="0px" marginwidth="0px" marginheight="0px" scrolling="no" allowtransparency="yes"></iframe>
</body>
 

    2、在iframe中我们添加如下js

window.addEventListener('message',function(e){
		var data = e.data;
		alert(data.msg);
		 window.parent.postMessage({key:'callback',msg:'ok'},'*');
},false);

猜你喜欢

转载自gbjian001.iteye.com/blog/2290306
今日推荐