实现目标：两个网站页面实现跨域相互通信
当前例子依赖于 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: 'abcdefg'
}
};
// 不限制域名则填写 * 星号, 否则请填写对应域名如 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>
或子页面的 按钮直接触发：
//向父窗框返回结果
window.parent.postMessage({ act: 'response', msg: { answer: '我接收到啦3321！'} }, '*');
//********************************************************************************************************************************
方案二：
<script src="../js/layui/layui.js?v=12" charset="utf-8"></script>
<iframe id="myIframe" src="http://localhost:8633/WebForm2.aspx"></iframe>
<script>
layui.use(['form', 'layedit', 'laydate', 'upload', 'element'], function () {
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate;
// 注册消息事件监听，对来自 myIframe 框架的消息进行处理
window.addEventListener('message', function(e){
if (e.data.act == 'response') {
alert(e.data.msg.answer);
parent.$('#series_name').val('我被改变了');
parent.layer.closeAll(); //疯狂模式，关闭所有层
} else {
alert('未定义的消息: '+ e.data.act);
}
}, false);
});
</script>