标签：nbsp web tps 数据 协议 问题 所有权 框架 发送
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域。
举几个例子：
otherWindow.postMessage(message, targetOrigin, [transfer])
window.parent.postMessage(‘hello world‘,‘http://a.123.com:8080/index.html‘)
只有父窗口是http://a.123.com:8080时才会接受到传递的消息。
window.addEventListener(‘message‘, function (e) {
console.log(e.data) //e.data为传递过来的数据
console.log(e.origin) //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
console.log(e.source) //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
})
共两个页面，
页面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‘);
// 注意：必须是在框架内容加载完成后才能触发 message 事件哦
$myIframe.on(‘load‘, function(){
var data = {
act: ‘article‘, // 自定义的消息类型、行为，用于switch条件判断等。。
msg: {
subject: ‘跨域通信消息收到了有木有~‘,
author: ‘CSDN-神神的蜗牛‘
}
};
// 不限制域名则填写 * 星号, 否则请填写对应域名如 http://www.b.com
$myIframe[0].contentWindow.postMessage(data, ‘*‘);
});
// 注册消息事件监听，对来自 myIframe 框架的消息进行处理
window.addEventListener(‘message‘, function(e){
if (e.data.act == ‘response‘) {
alert(e.data.msg.answer);
} else {
alert(‘未定义的消息: ‘+ e.data.act);
}
}, false);
</script>页面代码：www.b.com/b.html
<script>
// 注册消息事件监听，对来自 myIframe 框架的消息进行处理
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>
标签：nbsp web tps 数据 协议 问题 所有权 框架 发送
原文地址：https://www.cnblogs.com/sweeeper/p/11131000.html
