透过postMessage，实现跨域闭门对话

2023-11-14 04:32:14

跨越围墙，探索postMessage的魅力

postMessage方法是一个JavaScript内置方法，允许脚本在不同的窗口、标签或框架之间安全地传递数据。它的出现，打破了浏览器安全策略同源策略的限制，为数据交互创造了新的可能。

同源策略是一项重要的安全措施，它限制了不同来源的脚本对彼此的访问。这样做是为了防止恶意网站访问您存储的敏感数据，例如密码和信用卡信息。但是，在某些情况下，您可能希望跨越这些限制，以便不同的网页能够相互通信。此时，postMessage方法就派上用场了。

postMessage方法的工作原理非常简单。您只需调用该方法，并在消息参数中指定要发送的数据。然后，脚本可以监听其他窗口、标签或框架发来的消息，并做出相应的反应。这样，您就可以在不同来源的脚本之间实现安全可靠的数据交换。

实例演绎，亲身感受postMessage的强大

为了更直观地了解postMessage方法的实际应用，让我们通过一个简单的示例来探索其魅力。

假设我们有两个网页，A页面和B页面。A页面内嵌了B页面，并且希望在B页面中进行操作时，A页面能够做出相应的反应。

首先，在B页面中添加一个按钮，当用户点击该按钮时，将一条消息发送给A页面。

<button onclick="sendMessageToAPage()">发送消息到A页面</button>

<script>
  function sendMessageToAPage() {
    window.parent.postMessage("Hello from B page!", "*");
  }
</script>

在A页面中，添加一个消息监听器，以便在收到B页面发送的消息时做出反应。

<script>
  window.addEventListener("message", function(event) {
    if (event.origin !== "http://bpage.com") {
      return;
    }

    alert("收到B页面的消息：" + event.data);
  });
</script>