跨域通信的妙招：用postMessage解锁IE11窗口之间的对话

2023-10-16 10:10:03

跨域通信的挑战：IE11的特殊性

跨域通信是一种在不同域名、端口或协议之间进行数据传输的技术。在Web开发中，跨域通信是一个常见的难题，尤其是在IE11浏览器中。IE11对跨域通信有严格的限制，这使得许多常用的跨域通信方法无法在IE11中使用。

postMessage：IE11跨域通信的救星

postMessage是HTML5中引入的一种跨域通信API。它允许不同窗口、框架甚至不同的文档之间进行数据传输。postMessage的原理是通过事件来实现通信的。当一个窗口或框架向另一个窗口或框架发送数据时，它会创建一个MessageEvent事件，并将数据作为参数传递给该事件。接收方可以监听该事件，并在事件触发时获取数据。

使用postMessage实现IE11跨域通信

以下是一个使用postMessage实现IE11跨域通信的简单示例：

旧系统代码：

<!DOCTYPE html>
<html>
<head>
  
  <script>
    // 创建一个新的窗口
    var newWindow = window.open("https://example.com/new-system.html");

    // 监听MessageEvent事件
    window.addEventListener("message", function(event) {
      // 获取从新系统发送过来的数据
      var data = event.data;

      // 根据数据进行处理
      ...
    });
  </script>
</head>
<body>
  <h1>旧系统</h1>
</body>
</html>

新系统代码：

<!DOCTYPE html>
<html>
<head>
  
  <script>
    // 当用户触发某个操作时，向旧系统发送数据
    document.getElementById("send-button").addEventListener("click", function() {
      // 获取要发送的数据
      var data = document.getElementById("data-input").value;

      // 向旧系统发送数据
      window.opener.postMessage(data, "*");
    });
  </script>
</head>
<body>
  <h1>新系统</h1>
  <input type="text" id="data-input" placeholder="要发送的数据">
  <button id="send-button">发送</button>
</body>
</html>