DEV Community

Alex Adam
Alex Adam

Posted on • Originally published at alexadam.dev

How to communicate between an iframe and the parent page

#html #javascript #iframe

From parent page -> iframe

In the parent page:

const iframe = document.getElementById('iframe');
iframe.contentWindow.postMessage('some message', '*');
Enter fullscreen mode Exit fullscreen mode

In the iframe:

window.onmessage = function(e) {
  if (e.data === 'some message') {
    alert('It works!');
  }
};
Enter fullscreen mode Exit fullscreen mode

From iframe -> parent page

In the parent page:

window.onmessage = function(e) {
  if (e.data === 'from iframe') {
    alert('It works!');
  }
};
Enter fullscreen mode Exit fullscreen mode

In the iframe:

window.top.postMessage('from iframe', '*')
Enter fullscreen mode Exit fullscreen mode

Source

Top comments (0)

Read next

gravgor profile image

Unlock Rich Landmark Data with the Landmark API: Features, Usage, and More

Marceli Borowczak -

gbubemi_attah_8220489db16 profile image

Simplifying String Validation in Go: Introducing validatorgo

Gbubemi Attah -

samarpankc profile image

Tim Berners-Lee : The Man Behind the Web

Samarpan KC -

ubaton profile image

Setting Up Tailwind in React Native SDK 51 with NativeWind

Raymond -