今天才发现原来有这么个好东西啊,跨域通信太方便了,
举个小栗子:
共两个页面,
页面1:www.a.com/a.html
页面2:www.b.com/b.html
实现目标:两个网站页面实现跨域相互通信
当前例子依赖于 jQuery 3.0
页面代码:www.a.com/a.html
<iframe id="myIframe" src="http://www.b.com/b.html"></iframe>
<script>
var $myIframe = $('#myIframe');
$myIframe.on('load', function(){
var data = {
act: 'article',
msg: {
subject: '跨域通信消息收到了有木有~',
author: 'CSDN-神神的蜗牛'
}
};
$myIframe[0].contentWindow.postMessage(data, '*');
});
window.addEventListener('message', function(e){
if (e.data.act == 'response') {
alert(e.data.msg.answer);
} else {
alert('未定义的消息: '+ e.data.act);
}
}, false);
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
页面代码:www.b.com/b.html
<script>
window.addEventListener('message', function(e){
if (e.data.act == 'article') {
alert(e.data.msg.subject);
window.parent.postMessage({
act: 'response',
msg: {
answer: '我接收到啦!'
}
}, '*');
} else {
alert('未定义的消息: '+ e.data.act);
}
}, false);
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
对不同浏览器应该还需要一些兼容操作,我因为只使用 Chrome 所以就偷个懒不写啦,可以去网上搜搜。