什么是跨域通信

跨域通信是指在不同的域名下的网页之间进行通信。由于浏览器的同源策略限制，不同的域名访问对方网站中的数据是受限的。JavaScript使用HTML5的window.postMessage方法实现跨域通信，是一种安全而可靠的通信方式。

使用window.postMessage方法实现跨域通信的步骤

实现跨域通信的步骤如下：

在发送方的页面中添加代码

// 设置消息接收方页面的具体域名和端口号，*表示接收来自所有源的消息 
var targetOrigin = 'http://www.example.com:8080'; 

// 定义消息数据 
var message = 'hello world'; 

// 发送消息，第一个参数是消息数据，第二个参数是消息接收方的源地址 
window.parent.postMessage(message, targetOrigin);

在发送方的页面中添加代码，指定消息接收方的源地址和发送的消息数据。
使用window.parent.postMessage方法发送消息，第一个参数为消息数据，第二个参数为消息接收方的源地址。

在接收方的页面中添加代码

window.addEventListener('message', receiveMessage, false); 

function receiveMessage(e) { 
  // 接收到的数据 
  var message = e.data; 

  // 消息来源 
  var origin = e.origin; 

  // 在控制台中打印收到的消息数据和消息来源 
  console.log('Message received: ' + message + ', origin: ' + origin); 
}

在接收方的页面中，使用window.addEventListener监听message事件。
在事件处理函数receiveMessage中获取接收到的消息数据，以及消息的来源信息。
对接收到的数据进行处理。

以上是使用window.postMessage实现跨域通信的基本步骤，下面就来看两个示例：

示例一：向父窗口发送消息

假设有一个页面A，包含一个iframe标签，在iframe标签中嵌入了另一个页面B。现在需要在页面B中向页面A发送消息，实现跨域通信。

页面A代码

<!doctype html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Parent Window</title> 
  </head> 
  <body> 
    <h1>Parent Window</h1> 
    <iframe src="child.html"></iframe> 
    <script> 
      function receiveMessage(e) { 
        var message = e.data; 
        console.log('Message received: ' + message); 
      } 

      window.addEventListener('message', receiveMessage, false); 
    </script> 
  </body> 
</html>

页面A中包含一个iframe标签，src属性指向另一个页面child.html。
在页面A中监听message事件，并在事件处理函数receiveMessage中接收消息。

页面B代码

<!doctype html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Child Window</title> 
  </head> 
  <body> 
    <h1>Child Window</h1> 
    <script> 
      var targetOrigin = 'http://localhost:3000'; 
      var message = 'Hello Parent Window'; 
      window.parent.postMessage(message, targetOrigin); 
    </script> 
  </body> 
</html>

页面B中使用window.postMessage方法向父窗口发送消息。

示例二：使用ajax获取不同域名下的数据

该示例使用XMLHttpRequest对象向不同的域名下的服务器发送请求，获取数据。由于浏览器的同源策略限制，只能在同一域下获取数据。但是，可以使用window.postMessage方法实现跨域通信，进行数据的传递。

<!doctype html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Data Transfer</title> 
  </head> 

  <body> 
    <h1>Data Transfer</h1> 

    <button onclick="getData()">Get Data</button> 

    <script> 
      function getData() { 
        // 建立XMLHttpRequest对象 
        var xhr = new XMLHttpRequest(); 

        // 定义请求地址 
        var requestUrl = 'http://localhost:8080/data'; 

        // 监听请求状态变化事件 
        xhr.onreadystatechange = function() { 
          // 请求状态为4时，表示完成请求 
          if (xhr.readyState === 4) { 
            // 请求成功 
            if (xhr.status === 200) { 
              // 在控制台中打印响应数据 
              console.log(xhr.responseText); 
            } else { 
              // 请求失败 
              console.error(xhr.statusText); 
            } 
          } 
        }; 

        // 发送GET请求 
        xhr.open('GET', requestUrl, true); 

        // 设置请求头，指定Accept属性 
        xhr.setRequestHeader('Accept', 'application/json'); 

        // 发送跨域消息 
        var targetOrigin = 'http://localhost:3000'; 
        var message = 'request data'; 
        xhr.addEventListener('load', function() { 
          // 发送跨域消息 
          window.parent.postMessage(message, targetOrigin); 
        }, false); 

        // 发送请求 
        xhr.send(); 
      } 
    </script> 
  </body> 
</html>

页面中包含一个按钮，单击按钮时触发getData函数，发送请求获取数据。
在处理请求的过程中，定义请求头，表示需要接收JSON格式的数据。
发送跨域消息时，将请求的数据作为消息数据发送，目标来源和接收方与上个示例相同。

以上就是使用window.postMessage实现跨域通信的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript使用HTML5的window.postMessage实现跨域通信例子 - Python技术站

JavaScript使用HTML5的window.postMessage实现跨域通信例子