100%

iframe Window

✓ Published0🌍 Public

Last edited Mar 15, 2017

Created on Sep 17, 2018

This example demonstrates two-way communication between a parent window and an embedded iframe using the HTML5 `postMessage` API. The parent page creates an iframe dynamically and sends random numeric strings to it via `iframeEl.contentWindow.postMessage`, while the iframe sends messages back using `window.parent.postMessage`. Both pages listen for incoming messages with `window.addEventListener('message')` and display the received data in a results div. The iframe is styled with a red background and includes a button to trigger outgoing messages.

AI-generated description

Two way iframe communication

The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.

Parent

Send messages to iframe using iframeEl.contentWindow.postMessage Recieve messages using window.addEventListener('message')

iframe

Send messages to parent window using window.parent.postMessage Recieve messages using window.addEventListener('message')

Live Example

http://pbojinov.github.io/iframe-communication/

Similar vizzes

Loading thumbnail…

HTML5 MessageChannel

This example demonstrates a two-way messaging system between a parent page and an iframe using the HTML5 MessageChannel API. The parent page sends a test message via `window.postMessage`, while the iframe establishes a dedicated communication port by transferring `channel.port2` through the same method. Both sides attach `onmessage` handlers to their respective ports, enabling direct, bidirectional message exchange triggered by button clicks. The code uses native `MessageChannel`, `postMessage`, and `port1`/`port2` references, with console logging to show the message flow. No external libraries or data sources are involved; the rendering is plain HTML and JavaScript.

AAnsonT

77% match

Loading thumbnail…

Gist d7d415d1f3401d7b9d482f01706d1b72

This example demonstrates a WordPress code snippet that delays the loading of embedded iframe content on single post pages. The PHP filter modifies the post’s content by replacing standard `iframe` `src` attributes with a custom `data-iframe-src` attribute, while the accompanying JavaScript—executed after a 1.3-second timeout—uses `querySelectorAll` to reassign the original `src` to each element via `frame.dataset.iframeSrc`. This technique postpones third-party widget rendering (such as video embeds) to prioritize initial page load, without relying on any external JavaScript libraries or APIs.

KKopylovVitalik

56% match

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal HTML page that embeds an iframe playing a YouTube video. The page contains no visible content of its own; instead, it relies entirely on the external video player for its visual output. The code uses standard HTML elements—`<iframe>`, `<head>`, and `<body>`—to structure the document, with no JavaScript or data visualization libraries involved. The presentation is a plain, bare-bones webpage, highlighting how a simple HTML file can integrate third-party media without additional rendering or data processing.

SShimanWen

55% match

Loading thumbnail…

WICN Radio Now Playing IFrame

This example shows a live "Now Playing" widget from WICN Radio, embedded in a full-screen iframe. The iframe loads the Spinitron web integration widget, displaying the current track, recent plays, sharing options, album cover art, and a player. The page uses minimal HTML and CSS to position the iframe fixed to the viewport. The code does not rely on JavaScript APIs or libraries; it directly embeds the remote Spinitron widget.

CCurran Kelleher

55% match

Loading thumbnail…

HTML Starter

This example demonstrates the minimal setup for displaying dynamic content on a web page using plain HTML and JavaScript. It shows how a script can insert text into a page element by targeting it with `document.getElementById`. The code assigns a string to a variable and updates the `textContent` of a `<div>` with the ID `message`. This serves as a bare-bones starting point for web development, requiring no external libraries or frameworks.

RRobert W. Corty

53% match

Loading thumbnail…

0415

This example demonstrates a minimal HTML page that uses JavaScript to display text on the page and in the browser console. The page writes a red-colored HTML string and a personalized age message directly into the document using `document.write`. It also logs “Hello JavaScript!” to the developer console with `console.log`. The code uses the React framework for the surrounding project, but the core interaction relies on basic JavaScript DOM methods and inline CSS styling.

CChomin21

53% match

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal HTML page with an embedded YouTube video in an iframe. The page itself contains no visible content, only a title in the browser tab. The code uses standard HTML5 structure with a `<head>` and empty `<body>` element, relying on the iframe’s `src` attribute to load external media. The rendering approach is purely static, with no JavaScript libraries, data sources, or interactive visualization logic present.

" write out loud "

53% match

Loading thumbnail…

HTML Starter

This example presents a minimal HTML page that displays the text "OK" and uses JavaScript to dynamically insert messages into a designated element. The page loads an external script, `test.js`, which attempts to set the text content of a `message-element` to "hello". The main inline script demonstrates a simple `console.log` call that outputs a greeting to the browser's developer console. The project uses foundational web technologies, specifically the HTML structure, inline CSS for styling, and core JavaScript for manipulating the DOM via `getElementById`.

Aalexleo1967

53% match