React中iframe子页面调用父页面函数报错的解决方法

嘿，这个问题我之前踩过坑！出现Uncaught TypeError: window.parent.handleClickOnParent is not a function的原因主要有两个：一是React组件的函数默认没有挂载到全局window对象上，二是可能存在浏览器跨域安全限制。咱们分两种场景来解决：

场景1：父页面与子页面同域名（协议、域名、端口完全一致） #

React组件内定义的函数属于组件实例的方法，并不是全局window的属性，所以子页面直接调用window.parent.handleClickOnParent肯定找不到。咱们需要把父组件的函数挂载到window上，同时记得组件卸载时清理避免内存泄漏：

父组件（函数组件示例） #

import { useEffect } from 'react';

function ParentPage() {
  // 定义父页面的处理函数
  const handleClickOnParent = (someParams) => {
    alert("My son clicked!" + someParams);
  };

  useEffect(() => {
    // 将函数挂载到全局window对象
    window.handleClickOnParent = handleClickOnParent;

    // 组件卸载时清理全局属性，防止内存泄漏
    return () => {
      delete window.handleClickOnParent;
    };
  }, [handleClickOnParent]); // 依赖项加入函数，确保函数更新时同步到window

  return (
    <div className="parent-container">
      <iframe src="/child-page" title="child-iframe" />
    </div>
  );
}

export default ParentPage;

子页面调用逻辑 #

function handleClick() {
  // 先做存在性判断，避免报错
  if (window.parent && typeof window.parent.handleClickOnParent === 'function') {
    const localParameters = "我是子页面的参数";
    window.parent.handleClickOnParent(localParameters);
  }
}

如果是类组件，写法类似：

import React from 'react';

class ParentPage extends React.Component {
  handleClickOnParent = (someParams) => {
    alert("My son clicked!" + someParams);
  };

  componentDidMount() {
    window.handleClickOnParent = this.handleClickOnParent;
  }

  componentWillUnmount() {
    delete window.handleClickOnParent;
  }

  render() {
    return <iframe src="/child-page" title="child-iframe" />;
  }
}

export default ParentPage;

场景2：父页面与子页面跨域 #

如果两个页面域名不同，浏览器的同源策略会阻止直接调用父页面的函数，这时候必须用postMessage API来实现跨域通信：

父页面监听消息 #

import { useEffect } from 'react';

function ParentPage() {
  useEffect(() => {
    const handleMessage = (event) => {
      // 非常重要：验证消息来源，防止恶意网站发送非法消息
      if (event.origin !== 'https://your-child-domain.com') {
        return;
      }
      // 处理子页面传递的参数
      alert("My son clicked!" + event.data);
    };

    // 监听message事件
    window.addEventListener('message', handleMessage);

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, []);

  return (
    <div className="parent-container">
      <iframe src="https://your-child-domain.com/child-page" title="child-iframe" />
    </div>
  );
}

export default ParentPage;

子页面发送消息 #

function handleClick() {
  const localParameters = "我是子页面的跨域参数";
  // 发送消息到父页面，第二个参数指定父页面域名，用*表示任意域名（不推荐，建议写具体域名）
  window.parent.postMessage(localParameters, 'https://your-parent-domain.com');
}

额外提醒 #

• 同域名场景下，挂载到window的函数要记得清理，否则多个组件实例可能会覆盖全局属性。
• 跨域场景下，一定要验证event.origin，这是保障安全的关键。
• 如果子页面也是React应用，除了postMessage，也可以考虑使用专门的iframe通信库，但postMessage是最原生、兼容性最好的方案。

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