如何使用JavaScript实现窗口间的数据通信与结果返回？

Hey there! No need to apologize for your English—your use case is totally clear. Let's walk through the most practical way to make two browser windows communicate: using the browser-native window.postMessage() API. This works seamlessly for same-origin pages and can be secured for cross-origin scenarios too.

How It Works #

The postMessage() method lets you send structured data between windows/tabs, and you can listen for incoming messages with the message event. We’ll split this into two parts: the source window (your data-storing page) and the target window (the page that processes data).

Step 1: Source Window (Send Data & Listen for Results) #

In your data-storing page, you’ll need to:

1. Open the target processing window and keep a reference to it.
2. Add a listener to receive the processed result back.
3. Send your data to the target window once it’s ready.

Here’s the code:

// Open the target processing window (replace with your actual page URL)
const processingWindow = window.open('/path/to/processing-page.html', '_blank');

// Listen for messages sent back from the processing window
window.addEventListener('message', (event) => {
  // Critical: Validate the origin to avoid security risks!
  if (event.origin !== window.location.origin) return;

  // Check if this is the processed result we're expecting
  if (event.data.type === 'processed-result') {
    console.log('Received processed data:', event.data.payload);
    // Add your logic here to use the result (update UI, save to storage, etc.)
  }
});

// Trigger this function when you're ready to send data (e.g., on a button click)
function sendDataForProcessing() {
  const dataToSend = {
    type: 'raw-data',
    payload: {
      // Replace with your actual data—objects, strings, numbers all work
      userInfo: { name: 'Test', id: 123 },
      metrics: [45, 78, 23]
    }
  };

  // Make sure the processing window is still open before sending
  if (processingWindow.closed) {
    alert('Processing window was closed!');
    return;
  }
  processingWindow.postMessage(dataToSend, window.location.origin);
}

Step 2: Target Window (Receive Data, Process, Send Back Result) #

In your data-processing page, you’ll:

1. Listen for incoming messages from the source window.
2. Process the received data with your custom logic.
3. Send the processed result back to the source window.

Code example:

// Listen for messages from the source window
window.addEventListener('message', (event) => {
  // Validate origin to ensure trusted communication
  if (event.origin !== window.location.origin) return;

  // Check if this is the raw data we need to process
  if (event.data.type === 'raw-data') {
    const rawData = event.data.payload;
    
    // Replace this with your actual data processing logic
    const processedData = {
      status: 'completed',
      calculatedTotal: rawData.metrics.reduce((sum, num) => sum + num, 0),
      formattedUser: `User: ${rawData.userInfo.name} (ID: ${rawData.userInfo.id})`
    };

    // Send the processed result back to the source window
    event.source.postMessage({
      type: 'processed-result',
      payload: processedData
    }, event.origin);
  }
});

Key Security Tips #

• Never skip origin validation: Checking event.origin ensures you only communicate with trusted pages, blocking malicious fake messages.
• Avoid using * as the target origin: Specify the exact origin (e.g., https://your-domain.com) in postMessage() for cross-origin scenarios.
• Use event.source to reply: This ensures you send the result only to the window that initiated the communication.

That’s all you need! This setup will let your source window send data, the processing window handle it, and the result get sent back seamlessly. Let me know if you need help tweaking this to fit your specific code!

内容的提问来源于stack exchange，提问作者caphyr