Skip to main content
SimilarExport ZIP
100%

iFrame

✓ Published0🌍 Public
MMax Barrass
Last edited May 23, 2024
Created on May 23, 2024
Forked from HTML Starter

This example demonstrates bidirectional communication between an embedded iframe and its parent page using the HTML5 `postMessage` API and the `window.addEventListener('message')` event. It shows how a child document can display messages sent from the parent, and how a user can type text into an input field and send it back to the parent via `window.parent.postMessage`. The page is a minimal HTML document with inline CSS styling and vanilla JavaScript, requiring no external libraries or frameworks. It serves as a bare-bones template for cross-origin messaging patterns in web visualization contexts.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Parent and iFrame

This example demonstrates two-way communication between a parent window and a child iframe using the postMessage API. The parent sends user-typed messages to the iframe, while the iframe sends messages back that appear in the parent’s message area. It uses standard browser APIs, including `window.postMessage` and event listeners for the `message` event. The parent embeds a fully functional VizHub visualization as the iframe, sourced from a separate URL.

MMax Barrass
85% match
Loading thumbnail…

iframe Window

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.

EEkthelion
84% match
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…

Typerefinery.ai Widget

This example demonstrates a simple widget interface that enables communication between an embedded iframe and its parent page. It shows three buttons—Identity, Address, and Contact—that trigger custom events when clicked, sending structured JSON payloads through the browser's `postMessage` API or `CustomEvent` dispatch. The implementation uses Bootstrap 5.3 for button styling, jQuery for DOM manipulation, and native JavaScript event handling to raise actions like `OPEN_ITEM` with configurable parameters. The page listens for incoming parent messages and logs all interactions to the console, illustrating a basic pattern for cross-frame interaction in a visualization dashboard context.

MMax Barrass
72% match
Loading thumbnail…

iifaisal

This example displays a static web page with the message “Hello HTML!” centered and styled at a large font size. The implementation uses plain HTML, CSS, and JavaScript within a single document, with no external libraries or data sources. The CSS class `.message` controls the typography and alignment, while the body contains only the text content. It serves as a minimal demonstration of fundamental web technologies without interactive or dynamic visualization elements.

Iiifaisal
63% match
Loading thumbnail…

Fork of HTML Starter

This example shows a full-screen message reading “Hello HTML!” centered within the page, styled with a very large font size. It demonstrates the basic integration of CSS for visual formatting and JavaScript for potential interactivity, though the code itself contains no scripts. The page uses plain HTML elements and a style block to define the `.message` class, with no external libraries or data sources. It serves as a minimal template for understanding how HTML, CSS, and JavaScript can be combined in a simple, self-contained web page.

YYazan
62% 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
62% match
Loading thumbnail…

Fork of HTML Starter

A minimal HTML page demonstrates foundational web styling and scripting. The rendered output displays a centered message using a large cascading stylesheet (CSS) font size. The interactive behavior relies on JavaScript embedded directly within the markup. This example uses raw HTML elements, a CSS rule targeting the `.message` class, and inline JavaScript, serving as a basic template for exploring web technologies in isolation.

Llearningilona@gmail.com
61% match