在React中使用Iframe和PostMessage.

这段时间的一个项目途中使用了这个，后来因为安卓端要共用，就换成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

欢迎大家讨论交流！