window.postMessage用法

最新推荐文章于 2024-06-03 09:32:46 发布

Jason_wu86

最新推荐文章于 2024-06-03 09:32:46 发布

阅读量6.4k

点赞数 1

分类专栏：普通文章

本文链接：https://blog.csdn.net/weixin_40650646/article/details/81777398

版权

普通文章专栏收录该内容

64 篇文章 0 订阅

订阅专栏

我们有时候需要在打开的两个页面之间之间通信（可能这种情况并不多），这时候window.postMessage就显得特别有用。

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

想要更详细的介绍请看这里，但我看时感觉比较抽象，花了好多时间没理解。所以下面我做了个小例子给大家参考，希望能帮到大家。

现在我们有个需求是在页面a,里打开新窗口b，在b窗口里点击postMessage按钮，能够在a页面收到发来的消息。为了便于理解，这里我已将代码尽量简化，所以收到消息后只能在控制台看到打印

页面a的代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>page a</title>
</head>
<script>
  function test() {

    let op = window.open('b.html', '_blank'); //打开新窗口，并建立窗口的引用变量op

    function receiveMessage(event) {
      console.log('event', event);

    }

    op.addEventListener("message", receiveMessage, false); //监听新开窗口发来的消息
  }
</script>

<body>
  <div>

    <button onClick="test()">open</button>

  </div>

</body>

</html>

页面b的代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>page b</title>
</head>
<script>
  function post() {
    window.postMessage("hi there!", location.origin); //发送到所有同源的窗口，注意，当前窗口也会收到
  }

  function receiveMessage(event) {
    console.log('event', event)

  }
  window.addEventListener("message", receiveMessage, false);
</script>

<body>
  <div>

    <button onClick="post()">postMessage</button>

  </div>

</body>

</html>

如果您设置正常，在点击b页面的按钮后，a页面应该是下面这样：

Jason_wu86

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
window.postMessage用法

我们有时候需要在打开的两个页面之间之间通信（可能这种情况并不多），这时候window.postMessage就显得特别有用。 window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相...
复制链接

扫一扫