JavaScript怎么实现两个窗口之间的通信？ https://blog.csdn.net/kaimo313/article/details/107773642

最新推荐文章于 2024-07-08 10:19:40 发布

柠檬不喝柠檬茶

最新推荐文章于 2024-07-08 10:19:40 发布

阅读量1.5k

点赞数 1

文章标签： javascript 开发语言 ecmascript

原文链接：https://blog.csdn.net/kaimo313/article/details/107773642

版权

问题
最近在进行业务开发的时候，遇到一个问题，就是一个页面里面点击打开了一个新的窗口，然后在新的窗口里面保存成功数据之后需要更新前面一个窗口的数据？

window.postMessage的简单介绍
一段时间的挣扎，确定了用postMessage实现改功能，没办法，这个再一次涉及到了我的知识盲区。

我们先来看一看MDN上怎么说

简介
【window.postMessage】

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。

window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。

接收消息的窗口可以根据需要自由处理此事件。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

浏览器兼容性
在这里插入图片描述

示例
我们先写好两个页面

demo-1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo-1</title>
</head>
<body>
  <div id="demo-1">demo-1页面</div>
  <button id="btn">点击跳转到demo-2</button>
  <script>
    // 添加点击事件
    document.getElementById('btn').addEventListener('click', () => {
      window.open('./demo-2.html');
    });
    // 监听
    window.addEventListener('message', event => {
      // 我们能信任信息来源吗？
      if (event.origin !== window.location.origin) {
        alert('我们不能信任信息来源!!!!!')
        return;
      }
      console.log(event);
      alert(event.data.message)
    })
  </script>
</body>
</html>

demo-2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo-2</title>
</head>
<body>
  <div id="demo-2">demo-2页面</div>
  <button id="save">保存</button>
  <script>
    // 添加点击事件
    document.getElementById('save').addEventListener('click', () => {
      window.opener.postMessage({
        name: 'demo-2',
        message: '凯小默保存成功啦啦啦啦！！！！'
      }, window.location.origin);
    });
  </script>
</body>
</html>

1、我们用服务打开demo-1.html，然后点击跳转

在这里插入图片描述