记录react项目中引入iframe通信问题以及请求多次问题

实现情况：

页面中点击按钮会打开一个遮罩层，遮罩层中会通过iframe嵌入另一个域名的网站，呈现问卷调查表

问题1:

之前想在iframe加载之前实现一个loading，实现方式是使用useRef钩住iframe元素，在当前的current.onload中去改变了loading的状态，这样会使iframe页面刷新2次甚至3次，意味着会多次请求接口，并且可能造成通过postMessage传递的数据丢失。

正常情况应当是打开iframe页面时，所有接口只请求一次才对。

解决方法，去掉onload中的任何setState操作

问题2:

当打开chrome控制台同时打开iframe页面时，整个页面会卡死，并且会不定时弹出空的messageError.

原因：

写在useEffect中的reload函数使用useCallback钩子实现，并且作为依赖放入useEffect中，因为需要在该表单提交之后进行监听，监听用户是否提交了数据，提交后需要从外部关闭该遮罩层，并且刷新当前页面，改变待办事项的状态。

问题就出在reload函数中，使用window.onmessage去接收用户提交状态信息的时候，没有过滤信息类型，导致onmessage中的所有消息来源都会接收，由于iframe打开时会不断有消息发送到父级，所以导致了页面崩溃

解决：

添加判断，如果有source这个来源就说明不是用户发来的提交信息，而是iframe打开的常规消息。

这样就只会接收用户发来的消息类型