浏览器跨站点通信（两个IP不同网站通信）

需求场景：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

浏览器跨站点通信（两个IP不同网站通信）

猜你喜欢