React项目中如何向iframe传递数据并解析URL参数？

一、在iframe的React组件中读取URL查询参数 #

1. 客户端React组件（浏览器环境） #

直接用浏览器的URLSearchParams API解析查询参数，结合React状态展示数据：

import { useEffect, useState } from 'react';

const ClientComponent = () => {
  const [params, setParams] = useState({});

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const paramsObj = Object.fromEntries(searchParams.entries());
    setParams(paramsObj);
  }, []);

  return (
    <div id="server-component">
      <h1>param1: {params.param1}</h1>
      <h1>param2: {params.param2}</h1>
      <h1>param3: {params.param3}</h1>
    </div>
  );
};

2. 服务器端React组件（SSR环境） #

服务器组件无法访问浏览器window对象，需从请求上下文获取参数。以Next.js为例，可直接接收searchParams：

// Next.js 服务器组件示例
export default function ServerComponent({ searchParams }) {
  return (
    <div id="server-component">
      <h1>param1: {searchParams.param1}</h1>
      <h1>param2: {searchParams.param2}</h1>
      <h1>param3: {searchParams.param3}</h1>
    </div>
  );
}

其他SSR框架（如Remix）可通过对应loader函数或请求上下文获取参数，逻辑类似。

二、父页面向iframe传递数据的其他方式 #

1. 使用postMessage跨页面通信 #

这是跨页面（支持不同源）安全传参的常用方式，需验证消息来源：

父页面组件代码：

import { useRef, useEffect } from 'react';

const ParentComponent = () => {
  const iframeRef = useRef(null);

  useEffect(() => {
    const handleIframeLoad = () => {
      iframeRef.current.contentWindow.postMessage(
        { param1: 'a', param2: 'b', param3: 'c' },
        'http://xyz:8001' // 指定iframe的origin，避免发送给未知页面
      );
    };

    if (iframeRef.current) {
      iframeRef.current.addEventListener('load', handleIframeLoad);
      return () => iframeRef.current.removeEventListener('load', handleIframeLoad);
    }
  }, []);

  return (
    <iframe
      ref={iframeRef}
      autoFocus={true}
      title='test'
      width="100%"
      height={1000}
      src='http://xyz:8001'
    />
  );
};

iframe页面组件代码：

import { useEffect, useState } from 'react';

const IframeComponent = () => {
  const [params, setParams] = useState({});

  useEffect(() => {
    const handleMessage = (event) => {
      if (event.origin !== 'http://父页面的origin地址') return; // 验证来源
      setParams(event.data);
    };

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

  return (
    <div id="server-component">
      <h1>param1: {params.param1}</h1>
      <h1>param2: {params.param2}</h1>
      <h1>param3: {params.param3}</h1>
    </div>
  );
};

2. 共享本地存储（localStorage/sessionStorage） #

仅适用于同源场景，通过本地存储共享数据：

父页面组件代码：

const ParentComponent = () => {
  const sendDataToIframe = () => {
    const params = JSON.stringify({ param1: 'a', param2: 'b', param3: 'c' });
    localStorage.setItem('iframeParams', params);
  };

  return (
    <>
      <button onClick={sendDataToIframe}>发送数据</button>
      <iframe
        autoFocus={true}
        title='test'
        width="100%"
        height={1000}
        src='http://xyz:8001'
      />
    </>
  );
};

iframe页面组件代码：

import { useEffect, useState } from 'react';

const IframeComponent = () => {
  const [params, setParams] = useState({});

  useEffect(() => {
    // 初始读取存储的数据
    const storedParams = localStorage.getItem('iframeParams');
    if (storedParams) setParams(JSON.parse(storedParams));

    // 监听存储变化实时更新
    const handleStorageChange = (event) => {
      if (event.key === 'iframeParams') {
        setParams(JSON.parse(event.newValue));
      }
    };

    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);

  return (
    <div id="server-component">
      <h1>param1: {params.param1}</h1>
      <h1>param2: {params.param2}</h1>
      <h1>param3: {params.param3}</h1>
    </div>
  );
};

3. URL哈希传递数据 #

将数据放在URL哈希部分（#之后），适合不需要服务器解析的场景：

父页面的iframe src修改为：

src='http://xyz:8001/#param1=a&param2=b&param3=c'

iframe组件中解析：

import { useEffect, useState } from 'react';

const IframeComponent = () => {
  const [params, setParams] = useState({});

  useEffect(() => {
    const hashParams = new URLSearchParams(window.location.hash.slice(1));
    const paramsObj = Object.fromEntries(hashParams.entries());
    setParams(paramsObj);
  }, []);

  return (
    <div id="server-component">
      <h1>param1: {params.param1}</h1>
      <h1>param2: {params.param2}</h1>
      <h1>param3: {params.param3}</h1>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者shrikant.sharma