如何在iFrame上使用postMessage

Question

我有2个具有以下域的nodeJS应用程序：

• 本地主机：8000
• 本地主机：3000

在localhost：3000中，我有一个文本区域和一个提交按钮。

我想将textarea的内容（使用postMessage）发布到localhost：8000 /（some_id），并在localhost：8000页面上显示内容。

然后，我想在localhost：3000页面中显示localhost：8000 /（some_id）的iFrame。

我在完成此任务时遇到很多麻烦。我必须使用postMessage（）以这种方式完成它。

PS：我知道最好避免使用iFrame，但是出于我的应用程序的目的，必须使用它。

Answer 1

无论您将postMessage的哪一方面发送给另一端的message侦听器。

// in the parent document
iframeElement.contentWindow.postMessage('hi!');

// in the iframe
window.addEventListener('message', ({ data }) => {
  console.log('i got some data!', data); // i got some data! hi!
});

您还可以采用另一种方法，在iframe源中使用window.parent.postMessage()，并在父文档中与window.addEventListener('message', ...)一起收听。