Next.js 13.5.5+TS iframe场景：如何提前挂载postMessage监听避免丢消息？

我是Next.js 13.5.5+TypeScript新手，需将应用嵌入iframe并通过window.postMessage接收父页面数据。为保留page.tsx的SSR特性，我在客户端组件的useEffect中添加了消息监听，但父页面依赖iframe的load事件触发postMessage，此时子页面的监听尚未挂载，导致消息丢失。我可修改两端代码，曾尝试延迟父级发送消息、后设置iframe src但均无效，希望彻底解决该竞态问题而非临时规避。

相关代码 #

父页面iframe组件代码： #

import React, { useEffect, useState } from 'react';

const TheFrame = ({ appUrl, data}) => {
  const [iframeElement, setIframeElement] = useState(undefined);
  useEffect(() => {
    if (data) {
      postDataToIframe();
    }
    return () => {
      if (!iframeElement) return;
      iframeElement.removeEventListener('load');
    };
  }, []);

  function postDataToIframe() {
    const iframe = document.getElementById('theFrame');
    const payload= { data: data};

    if (iframe) {
      setIframeElement(iframe);
      iframe.addEventListener('load', () => {
        setTimeout(() => {
          const iframeDocument =
          iframe.contentWindow ||
          iframe.contentDocument ||
          iframe.contentDocument;
        iframeDocument.postMessage(payload, '*');
        }, 100);
      });
    }
  }

  return (
    <div>
      <div
        id="frame-container"
        className="col col-md-12 col-lg-10 h-full col-lg-offset-1 text-center"
      >
        {data && (
          <iframe
            id="theFrame"
            width="100%"
            height="100%"
            src={appUrl}
          />
        )}
      </div>
    </div>
  );
};

export default TheFrame;

嵌入的Next.js应用代码： #

app/page.tsx

import { getEnvVariables } from "@/env-variables"
import { LandingContainer } from "./landing/landing-container"

const Landing = async () => {
  const getAllowedDomains = async (): Promise<string[]> => {
    const { allowedDomains } = await getEnvVariables()
    return allowedDomains
  }
  return <LandingContainer allowedDomains={await getAllowedDomains()} />
}

export default Landing

app/landing/landing-container.tsx

"use client"
import Spinner from "@/components/Core/Loaders/Spinner"
import { useData } from "@/context/data-context"
import { RedirectType, redirect } from "next/navigation"
import { useEffect } from "react"

type Props = {
  allowedDomains: string[]
}
export const LandingContainer = ({ allowedDomains }: Props) => {
  const { data, setData } = useData()
  /* eslint-disable */
  useEffect(() => {
    const listener = (event: MessageEvent): void => {
      console.log(event)
      if (
        event.data &&
        event.data.data&&
        event.source &&
        allowedDomains.includes(event.origin)
      ) {
        console.log("data found")
        setData(event.data.data)
      }
    }
    window.addEventListener("message", listener, false)
    console.log("listener open")
    return () => {
      window.removeEventListener("message", listener)
    }
  }, [])
  /* eslint-enable */
  useEffect(() => {
    if (data) redirect("/home", RedirectType.replace)
  }, [data])
  return (
    <div className="h-screen my-[40vh] flex flex-col self-center">
      <Spinner />
    </div>
  )
}

已尝试方案 #

• 最后设置iframe的src，未成功；
• 在父页面添加setTimeout，虽有效但只是临时规避，希望彻底解决竞态问题。

解决方案：双向握手机制 #

核心思路是让子页面在监听挂载完成后，主动给父页面发送"就绪"信号，父页面收到该信号后再发送目标数据，从根本上消除竞态。

1. 修改父页面代码 #

import React, { useEffect, useState } from 'react';

const TheFrame = ({ appUrl, data}) => {
  const [iframeElement, setIframeElement] = useState(null);

  // 监听子页面的就绪信号
  useEffect(() => {
    const handleChildReady = (event) => {
      // 验证来源和消息类型
      if (event.data.type === 'CHILD_READY' && allowedDomains.includes(event.origin) && data) {
        // 子页面就绪后发送数据
        event.source.postMessage({ type: 'PARENT_DATA', data }, event.origin);
      }
    };

    window.addEventListener('message', handleChildReady);
    return () => window.removeEventListener('message', handleChildReady);
  }, [data]);

  return (
    <div>
      <div
        id="frame-container"
        className="col col-md-12 col-lg-10 h-full col-lg-offset-1 text-center"
      >
        {data && (
          <iframe
            ref={setIframeElement} // 使用ref代替getElementById，更符合React组件规范
            width="100%"
            height="100%"
            src={appUrl}
          />
        )}
      </div>
    </div>
  );
};

export default TheFrame;

2. 修改Next.js客户端组件代码（landing-container.tsx） #

"use client"
import Spinner from "@/components/Core/Loaders/Spinner"
import { useData } from "@/context/data-context"
import { RedirectType, redirect } from "next/navigation"
import { useEffect } from "react"

type Props = {
  allowedDomains: string[]
}
export const LandingContainer = ({ allowedDomains }: Props) => {
  const { data, setData } = useData()

  useEffect(() => {
    const listener = (event: MessageEvent): void => {
      // 验证来源和消息类型
      if (
        allowedDomains.includes(event.origin) &&
        event.data.type === 'PARENT_DATA' &&
        event.data.data
      ) {
        setData(event.data.data)
      }
    }

    window.addEventListener("message", listener, false)
    
    // 监听挂载完成后，立即给父页面发送就绪信号
    window.parent.postMessage({ type: 'CHILD_READY' }, '*')

    return () => {
      window.removeEventListener("message", listener)
    }
  }, [allowedDomains])

  useEffect(() => {
    if (data) redirect("/home", RedirectType.replace)
  }, [data])

  return (
    <div className="h-screen my-[40vh] flex flex-col self-center">
      <Spinner />
    </div>
  )
}

方案优势 #

• 彻底消除竞态：子页面主动告知就绪状态，父页面按需发送数据，无需依赖load事件或延迟
• 安全性高：保留了域名验证逻辑，避免跨域消息攻击
• 代码简洁：去掉冗余的setTimeout和getElementById，使用React ref更符合组件化开发规范

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