How to communicate between an iframe and the parent page

From parent page -> iframe

In the parent page:

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

In the iframe:

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

From iframe -> parent page

In the parent page:

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

In the iframe:

window.top.postMessage('from iframe', '*')

Source

--

--

--

https://alexadam.dev/

Love podcasts or audiobooks? Learn on the go with our new app.

JavaScript Array Distinct()

ReactJS Tutorial for Beginners -8

Web Socket With Node.js And Angular 8 (Real-Time Data Rendering)

Use React Router in Html Project

Magic Methods in JavaScript? Meet Proxy!

Understanding React Hooks Basics

hooks

Why is Nextjs so fast as compere to Reactjs?

Why is Nextjs so fast as compere to Reactjs?

Presentation Mode In vsCode is A God Gift For YouTuber and Teacher?

Presentation Mode In vsCode is A God Gift For YouTuber and Teacher?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
alex adam

alex adam

https://alexadam.dev/

More from Medium

Piano chord visualization application — a vanilla JS beginner-friendly tutorial. Part I

Modals/Popups — the easiest way!

Challenge-1 Frontendmentor.io

What is the CSS :root selector?