親ウィンドウから iframe への postMessage を使用するときの元のエラーを回避します (DOMWindow で「postMessage」が失敗しました)

Question

文字列化されたオブジェクトを含むメッセージを送信することで、2 つの React アプリケーションが通信できるようにしようとしています。

親 (http://localhost:3000) は、postMessage を介して次のようなメッセージを送信します:

リーリー

iFrame (http://localhost:3001) は、少なくともすぐにはメッセージを受信しません (ログが表示されるまで反応ソフト更新を待つ必要があります)。

スローされる最初のエラー:

ああああ

Answer 1

これは、この postMessage() メソッドを呼び出したとき、iframe ドキュメントがまだ読み込まれていないため、受信する contentWindow は元の about:blank# であるためです。 ## ドキュメントの 1 つが、あなたが期待していたものではありません。

ここでのエラー メッセージは少しわかりにくいと言う人もいるかもしれません。開発ツールは、場所のソースが

about:blank (たとえそれがグローバル ドキュメントの origin で postMessage()) を確認してください。

しかし、とにかく、問題を解決するには、

<iframe> の load イベントを待ちます。 (申し訳ありませんが、私は ReactJS 忍者ではないので、これを行うための最良の方法を見つけてもらいます)。

これは、ソリューションを適用した簡単な再現セットアップです:

https://jsfiddle.net/382pz5er/ (StackSnippet の null オリジン フレームがここでは悪い例であるため、外部委託されています)。