CODEWITHSUNDEEP
javascriptnode.jsiframecsrfsame-origin-policy
CodeRocks
CodeRocks

Reputation: 715

How to Use postMessage on iFrame

I have 2 nodeJS applications with the following domains:

In localhost:3000, I have a textarea, and a submit button.

I want to post the contents of the textarea (using postMessage) to a localhost:8000/(some_id), and display the contents on the localhost:8000 page.

Then, I want to show an iFrame of the localhost:8000/(some_id) in the localhost:3000 page.

I am having a lot of trouble accomplishing this. I must accomplish it in this way using postMessage().

PS: I know it is probably best to avoid iFrames, however for the purpose of my application, this is necessary to use.

Upvotes: 5

Views: 18426

Answers (1)

snek
snek

Reputation: 2161

Whatever you postMessage on one side will be sent to the message listener on the other side.

// 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!
});

You can also go the other way, and use window.parent.postMessage() in the iframe source and listen for it with window.addEventListener('message', ...) in parent document.

Upvotes: 18

Related Questions