在IFRAME中进行跨域通讯

gbjian001

浏览: 100986 次
性别:
来自: 成都

最近访客更多访客>>

vigour36

Aizen

yongmeixin

xiaomuzhangdong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

postMessage;h5

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);

分享到：