在React中使用Iframe和PostMessage.

最新推荐文章于 2025-05-08 16:05:20 发布

原创最新推荐文章于 2025-05-08 16:05:20 发布 · 6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#React #PostMessage #Iframe

React 同时被 2 个专栏收录

7 篇文章

订阅专栏

7 篇文章

订阅专栏

本文分享了一次项目中使用PostMessage进行跨域通信的经验，详细介绍了如何解决Iframe加载未完成即调用PostMessage的问题，并提供了具体的代码实现及监听load事件的解决方案。

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

这段时间的一个项目途中使用了这个，后来因为安卓端要共用，就换成GET传了，再通过解析URL获取参数。
虽然这次没用到，但是还是要总结一下。

过程中一直报错，原因就是Iframe没有加载完，就调用了PostMessage这个方法。

let iFrame = this.props.location.state.taskId?(
	<iframe
		id="childFrame"
		style={{ width: '100%', heigth: 700}}
		src={ srcUrl }
		scrolling="auto"
		frameBorder="0"
	/>
):'loading'

主要就是给Iframe加了个监听load的方法，当加载完后再执行。

componentDidMount() {
	let data = {
		taskId: '11'
	}; //需要传的参数，此处假装要传一个taskId过去
	let childFrame = document.getElementById("childFrame");
	childFrame.addEventListener("load", function() {
		childFrame.contentWindow.postMessage(data, "http://localhost:8085");
	}, false)
}

之后另一个页面这样接收就可以啦。

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
	let origin = event.origin
	if (origin !== "http://localhost:8085")
		return;
	// 事务处理代码
}

具体写法可参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

欢迎大家讨论交流！