Skip to content

A example project to showcase direct window / iframe communication via DATEX

License

Notifications You must be signed in to change notification settings

unyt-org/example-window-communication

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Example: Window communication

This repository provides a simple setup to showcase a bidirectional communication interface between your app and a popup window.

UIX Docs

The DATEX API to open a window (page, popup or tab) is similar to the window.open API with the difference that it is asynchronously and returns an object of the remote endpoint (the endpoint of the window) and the actual Window containing the DOM document.

import { WindowInterface } from "datex-core-legacy/network/communication-interfaces/window-interface.ts";

const { endpoint, window } = await WindowInterface.createWindow(
	"https://popup.com",   // URL of our window
	"MyWindow",            // Target specifying the name of the context
	`popup=yes`            // Window feature list
);

The DATEX app on the window site can connect to the parent site by creating a parentWindow:

const parentInterface = WindowInterface.createParentInterface(
	globalThis.opener,  // Parent window instance (app)
	"https://myapp.com" // URL of the parent window (app)
);

// The connection event is fired if we got a response from the app
parentInterface.addEventListener("connect", (event) => {
	// connection is established
	// event.endpoint gives us the endpoint of the app
});

When the createWindow call of the app did resolve, all DATEX traffic of the app directed to the endpoint of the window is directly routed via postMessage API.


© unyt 2024 • unyt.org