如何从父窗口向子窗口发送事件/数据？postMessage无效该怎么办？

Hey there! Let's break down how to send data or events from a parent window to a child, and troubleshoot that tricky postMessage issue you ran into.

There are two main approaches depending on whether your parent and child windows share the same origin (same protocol, domain, and port):

1. 同源场景：直接调用子窗口对象 #

If your child window is hosted on the same origin as the parent, you can directly reference the child window's functions or variables using the object returned by window.open:

// Parent window code
const childWindow = window.open('/child-page.html');

// Wait for the child window to finish loading before sending data
childWindow.onload = () => {
  // Call a function defined in the child window
  childWindow.receiveParentData({ message: "Hey, I'm your parent!" });
};

// Child window code
function receiveParentData(data) {
  console.log("Received data from parent:", data);
}

2. 跨源/通用场景：使用postMessage #

For cross-origin communication (or as a safe, standardized method for same-origin), postMessage is the way to go. It's designed explicitly for this use case, but small missteps can cause it to fail. Let's cover the correct usage first, then troubleshoot common issues.

Correct postMessage Implementation #

Parent Window Code

// Open the child window
const childWindow = window.open('https://your-child-domain.com');

// **Critical**: Wait for the child to load before sending messages
childWindow.onload = () => {
  childWindow.postMessage(
    { type: "greeting", content: "Hello from parent!" },
    "https://your-child-domain.com" // Exact origin of the child window (never use "*" in production!)
  );
};

Child Window Code

// Listen for incoming messages
window.addEventListener('message', (event) => {
  // **Always validate the sender's origin** to prevent malicious messages!
  if (event.origin !== "https://your-parent-domain.com") return;

  // Process the received data
  console.log("Got message from parent:", event.data);

  // Optional: Send a reply back to the parent
  event.source.postMessage("Message received!", event.origin);
});

Most postMessage failures boil down to these common mistakes—let's check each one:

• You sent the message before the child window finished loading
  If the parent sends data before the child's message listener is registered, the message gets lost. Instead of guessing when the child is ready:

  • Use the child's onload event (as shown in the example above), or
  • Have the child send a "ready" signal to the parent once it's loaded:

    // Child window
    window.addEventListener('load', () => {
      window.opener.postMessage("child-is-ready", "https://your-parent-domain.com");
    });
    
    // Parent window
    window.addEventListener('message', (event) => {
      if (event.data === "child-is-ready") {
        childWindow.postMessage({ msg: "Now I can send data safely!" }, event.origin);
      }
    });
    

• Incorrect origin specified in postMessage
  The second argument of postMessage must be the exact origin of the child window (protocol + domain + port). For example, if your child is at http://localhost:3000, http://localhost won't work—you need to include the port. Using * (wildcard) works for testing, but it's insecure for production.

• Your child window's origin validation is too strict (or wrong)
  If your child window checks event.origin but uses the wrong parent domain, it'll reject valid messages. Double-check that the origin string matches exactly (no typos, correct protocol/port).

• You're using an iframe instead of a popup?
  If the child is an iframe, you need to target iframe.contentWindow instead of the window.open return value:

  <!-- Parent window iframe -->
  <iframe id="childIframe" src="child.html"></iframe>
  
  <script>
    const iframe = document.getElementById('childIframe');
    iframe.onload = () => {
      iframe.contentWindow.postMessage("Hi from parent!", "https://your-child-domain.com");
    };
  </script>
  

• Browser security restrictions
  Popups opened automatically (not by a user click) might be blocked by browsers, breaking postMessage. Always ensure child windows are opened via user interaction (like a button click). Privacy modes in some browsers can also interfere, so test in regular mode first.

• For same-origin apps, direct function calls are simpler.
• For cross-origin or secure communication, stick with postMessage and follow the origin rules strictly.
• Always validate incoming messages in the child window to avoid security risks.

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