Skip to main content
SimilarExport ZIP
100%

HTML5 MessageChannel

✓ Published0🌍 Public
AAnsonT
Last edited Sep 11, 2014
Created on Sep 11, 2014

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.

AI-generated description

Similar vizzes

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

Fork of HTML Starter

This example displays the text “Hello HTML2!!” in large, centered type within a web page. The code defines a CSS class called `.message` to control the font size and alignment, and it uses plain HTML for the content and a JavaScript script tag for potential interactivity. It demonstrates a minimal setup for combining HTML, CSS, and JavaScript, as described in the associated README. The page’s rendering relies solely on standard browser CSS and HTML elements, with no external libraries or data sources.

Ffensterhebel
59% match
Loading thumbnail…

Fork of HTML Starter

This example shows a single HTML page that displays a large, centered text message reading “Hello HTML!”. It serves as a minimal demonstration of combining CSS for styling and JavaScript for potential interactivity, though the visible behavior is purely static. The page is built using plain HTML with a `<style>` block that sets the font size and alignment, and the `<body>` contains a `<div>` with the text. No external libraries or frameworks are loaded; it relies solely on native browser rendering. The CSS class `.message` applies a 13em font size and centered alignment to the text.

FFande Workspace
58% 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
58% match
Loading thumbnail…

Fork of HTML Starter

This example showcases the classic “Hello HTML” message displayed in two different styles within a single page. The first message is rendered inside a styled div using CSS with a large font size and centered alignment, while the second message appears in a separate div below it. The page uses plain HTML, CSS, and JavaScript, with no external libraries or frameworks. The rendering approach is straightforward DOM manipulation, where text content is placed directly in the HTML structure and styled via embedded CSS rules.

Bbenoliphant
58% match
Loading thumbnail…

Fork of HTML Starter

This example displays a single centered message, “Hello HTML!”, rendered as large, bold text on a plain white page. It demonstrates the fundamental structure of an HTML document that combines CSS for styling and JavaScript for interactivity, though the code itself contains no scripts. The styling is applied directly within a `<style>` block in the document’s head, using a `.message` class to set the font size and alignment. This serves as a minimal starting point for building more complex visualizations.

Mmberger92@online.de
57% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS and JavaScript to render a centered message. The page contains a single element with the class `message`, styled with a large font size and text alignment through inline CSS rules. It serves as a foundational template for web-based visualizations, showcasing how to structure an HTML document with embedded styles and an empty body for dynamic content. The implementation relies on basic HTML structure and CSS styling, with JavaScript potentially added for interactivity. This starter template provides a clean slate for building custom visualizations using frameworks like React or D3.

OOfoe Apronti
57% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a basic interactive HTML page that displays a large, centered “Hello HTML!” message. A button labeled “Click me” triggers a `myFunction` JavaScript function, which logs “You clivked me” to the browser’s console. The page uses plain HTML, CSS for styling via the `.message` class, and JavaScript for the button’s onclick event handler, without any external libraries or frameworks.

HHassan Abdullah
57% match