react iframe 使用contentWindow.postMessage 传递参数

最新推荐文章于 2025-06-18 17:46:05 发布

迟长志

最新推荐文章于 2025-06-18 17:46:05 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： iframe 文章标签： react iframe postMessage

本文链接：https://blog.youkuaiyun.com/github_38696818/article/details/124297084

iframe 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在React项目中如何通过iframe进行跨域数据传递，详细解析了从父页面向子页面（iframe）传递对象的实现过程，并讨论了在不同环境下（本地与服务器）的加载顺序问题。作者分享了初始的实现方式以及遇到的问题，最后提出了一个兼容本地和部署环境的改进方案，确保数据能在子页面正确接收。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

A项目（react）使用iframe 嵌套B(react) 项目时候需要传递一个对象；

 private gettaskDetailIframeSrc = () => {
        const { currentGroup } = this.props;
        let origin = location.origin;
        let path = '/app/oa';
        let search = `?${agent.setCurrentOrg(currentGroup.orgType, currentGroup.orgId)}`;
        if ($config.isLocal) {
            // 如果是本地  端口号对应的是index的mappingPort配置的端口
            origin = `${location.protocol}//${location.hostname}:3001`;
            path = "";
        }
        return `${origin}${path}?home=home`; // 查看
    }

在事件触发是传递参数

private call(item) {
        const iframeObj = document.getElementById('iframeDetail') as HTMLIFrameElement;
        iframeObj.addEventListener('load', () => {
 
                    iframeObj.contentWindow.postMessage(JSON.stringify(item), '*')
     
        })
    }

为什么要监听load ,因为我们要等ifreame 渲染完才能继续传递数据

那么B页面如何接收呢，这问题最开始很简单的放在了最外层的windows上

let propsBody: $api.TaskDetails = {};

window.onload = () => {
    window.addEventListener('message', (e) => {
        if (typeof e.data === 'string') {
            propsBody = JSON.parse(e.data);
        }
    })
}



。。。。



public componentDidMount() {

 this.setState({
                    approvalProcessLoading: false,
                    propsList: propsBody
                })
}

这么二的写法当时真的不知道怎么想的，但是该说不说确实好用，本地一点问题没有，热而部署到服务器没被气死。

在本地测试时候记载顺序是先触发了window.onload，在触发componentDidMount ，而部署后完全是反过来的

后来发现自己一直纠结的点不对，我一直在考虑window.onload 和componentDidMount的加载顺序问题，我忽略了本质问题，那就是数据传输时候是在B页面完成后在传递的，那是不是说在componentDidMount周期内部我可以接受参数，遂部署测试，验证了我的猜测。然后为了兼容本地方便调试和部署环境兼容做了以下处理

if ($config.isLocal) {
                this.setState({
                    approvalProcessLoading: false,
                    propsList: propsBody
                })
                this.renderJurisdiction(propsBody);
            } else {
                window.addEventListener('message', (params) => {
                    if (params) {
                        this.setState({
                            approvalProcessLoading: false,
                            propsList: JSON.parse(params.data)
                        })
                        this.renderJurisdiction(JSON.parse(params.data));
                    }
                }, false);
            }