Cross-Window Communication for Web Apps – CrossWindow.js

The CrossWindow.js JavaScript library helps create web applications that need to communicate between different browser windows.

It allows you to send messages from one window to another and get information about their positions on the screen. It uses LocalStorage to keep track of open windows and their metadata, and BroadcastChannel to send messages between them.

How it works:

CrossWindow.js serves as a robust solution for developers needing to manage multiple browser windows in a cohesive manner. This library enables offline messaging between browser windows, which can be useful in applications to maintain communication even without an internet connection. Users can determine the “best” window for receiving messages, considering their relative screen positions, which is essential for creating spatially aware web applications.

The library’s potential extends to broadcasting keyboard and mouse events across windows, resulting in a unified user experience across multiple browser instances. Particularly useful for complex web applications that require user interactions to reflect across various components or sections. Furthermore, CrossWindow.js introduces intersection events to detect overlapping windows, thereby enhancing the interactive possibilities.

Moreover, the library aids in organizing windows according to cardinal directions (North, South, East, West). This feature enables developers to simplify the process of managing multiple windows and their spatial relationships.

How to use it:

1. Install and import the CrossWindow.js library.

# NPM
$ npm install crosswindow

<script src="/dist/crosswindow.js"></script>
<script src="/dist/crosswindow.debugger.js"></script>

2. Initialize the CrossWindow on document ready.

let crosswindow = new CW.CrossWindow(window, {
  // default options
  broadcastMouseEvents: true,
  broadcastKeyboardEvents: true,
});

3. Create a new CrossWindow debugger instance for debugging and window management.

let crossWindowDebugger = new CWDEBUG.CrossWindowDebugger(crosswindow, {
  // default options
  showOtherWindows: false,
  showWindowLegend: false,
  showPositionLegend: false,
  showOpenWindowButton: false,
  showExamplesBar: false,
  customStyles: false
});

4. Open a new browser window with the open method.

crosswindow.open('/path/to/page', {
  // size
  width: windowWidth,
  height: windowHeight,
  // position
  top: top /*- window.outerHeight*/,
  left: left + window.outerWidth
}, true);

5. Event handlers.

crosswindow.on('windowOpened', function (otherWindow) {
  // fired when a new window is opened
  // Send a message to the newly opened window
  otherWindow.postMessage({
    type: 'hello',
    message: 'Hello from ' + crosswindow.windowId
  });
});
crosswindow.on('windowClosed', function (currentWindowMetadata) {
  // fired when a window is closed
});
crosswindow.on('windowChanged', function (currentWindowMetadata) {
  // fired when a window's state changes (e.g., moved or resized)
});
crosswindow.on('keyEvent', function (event) {
  // fired when reveived keyboard events from other windows
});
crosswindow.on('mouseEvent', function (event) {
  // fired when reveived mouse events from other windows
});
crosswindow.on('message', function (event) {
  // fireed when reveived messages from other windows
});

6. API methods.

// get all managed windows
crosswindow.getWindows();
// get window by ID
crosswindow.getWindowById(crosswindow.windowId);
// find the "best" window based on a desired position
crosswindow.getBestWindow({
  position: { x: 100, y: 100 }, 
  screenPosition: { x: 1000, y: 1000 }
});