需求场景：OA系统会通过接口调用的方式将ERP系统的待办信息获取并显示在OA系统中。登录OA系统后，在OA系统中点击ERP系统的待办，会自动打开ERP系统业务处理页面，当ERP系统对应业务处理完毕，需要在OA系统中刷新待办记录（不再显示已经处理完的待办）。
将需求提炼为模型：网站A的页面page1与网站B的页面page2，在page1中点击按钮自动打开page2，当page2点击按钮关闭页面时向page1发送消息。
实现思路：在page1点击按钮打开page2页面时，调用postMessage方法，向page2发送消息。该消息中包含了page1的诸多信息（网站地址，发送的内容等等）；当page2点击按钮时，同样调用postMessage方法，向page1发送消息。
实现效果：
实现代码：
page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站A的page1</title>
<script src="./js/jquery-1.8.2.min.js"></script>
</head>
<body>
<h2>网站A的page1</h2>
<div>
<table>
<tr>
<button id="btn_oa">点击我打开网站B的page2页面</button>
</tr>
</table>
</div>
<script type="text/javascript">
var targetWindow;
//打开网站B的page2页面，并发送一个信息
$("#btn_oa").on("click", function() {
targetWindow = window.open('http://127.0.0.1:8088/page2.html');
//延迟2秒钟等新页面打开后发送一个消息给新页面
setTimeout("postmessage()",2000 );
});
function postmessage(){
targetWindow.postMessage('来自网站A的消息', 'http://127.0.0.1:8088/page2.html');//发送的消息内容 新页面地址
};
// 接收消息
window.addEventListener('message', function(e) {
alert(e.data)
});
</script>
</body>
</html>page2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站B的page2页面</title>
</head>
<body>
<div>
<h2>网站B的page2页面</h2>
<h3>点击下方提交按钮模拟提交操作</h3>
<button id="btn_submit">提交</button>
</div>
<script src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var obj;
$("#btn_submit").on("click", function() {
obj.source.postMessage('来自网站B的消息', obj.origin)
window.close(); //关闭当前页面
});
//监听前一个页面发送过来的信息
window.addEventListener('message', function(e){
console.log(e);
obj = e;
});
</script>
</body>
</html>代码解读：
http://127.0.0.1:8088 ：网站B的访问地址
./js/jquery-1.8.2.min.js：项目中jquery包的地址
注：
1.page1和page2需要放在两个不同的项目里面（不同访问地址）
2.还有一种类似实现方法，是使用localStorage来存储数据，此方法只能用于同一个网站内。可以参考如下文章：
https://blog.csdn.net/liangmengbk/article/details/129465097
