什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域。
举几个例子：
- http://a.123.com/index.html和http://a.123.com/index.js非跨域，它们有相同的域名，协议和端口。
- http://a.123.com/index.html和http://b.123.com/index.js跨域，相同的端口、协议，但是域名不同（a.123.com和b.123.com）。
- http://a.123.com:8080/index.html和http://a.123.com:8081/index.js跨域，相同的域名、协议，但是端口不同（8080和8081）。
- http://a.123.com/index.html和https://a.123.com/index.js跨域跨域，相同的域名、端口，但是协议不同（http和https）。
【发送消息】
otherWindow.postMessage(message, targetOrigin, [transfer])
- otherWindow
其他窗口的一个引用，写的是你要通信的window对象。
例如在iframe中向父窗口传递数据时，可以写成window.parent.postMessage()，window.parent表示父窗口。 - message
需要传递的数据，字符串或者对象都可以。 - targetOrigin
表示目标窗口的源，协议+域名+端口号，如果设置为“*”，则表示可以传递给任意窗口。在发送消息的时候，如果目标窗口的协议、域名或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。例如：
window.parent.postMessage('hello world','http://a.123.com:8080/index.html') 只有父窗口是http://a.123.com:8080时才会接受到传递的消息。
- [transfer]
可选参数。是一串和message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。我们一般很少用到。
【接收消息】
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的两个窗口之间建立双向通信 }) 
iframe传递关闭命令
父窗口接收到命令将iframe关闭
二， 父向子传数据
共两个页面，
页面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>