PostMessage Events

How It Works

PostMessage provides a secure way to communicate between your web application and the embedded InsightX iframe:

1. Listen for messages - Add an event listener on window to receive messages from the iframe
2. Send requests (optional) - Use iframe.contentWindow.postMessage() to send requests to the iframe
3. Handle messages - Process the received data based on the message type

Available Events

Basic Usage

All PostMessage events follow a similar pattern:

// Get reference to your iframe
const iframe = document.getElementById('bubblemap-iframe');

// Listen for responses from the iframe
window.addEventListener('message', (event) => {
  const response = event.data;
  
  // Check the response type (see specific event documentation for response types)
  if (response.type === 'expected_response_type') {
    // Process the response data
  }
});

// Send a request to the iframe
iframe.contentWindow.postMessage({
  type: 'request_type'  // See specific event documentation for request types
}, '*');

🔒

Security Note: The examples use '*' as the target origin, which works but allows messages to/from any origin. For better security in production, validate message origins:

Sending to the iframe:

JavaScript

iframe.contentWindow.postMessage(request, 'https://app.insightx.network');

Receiving from the iframe:

JavaScript

window.addEventListener('message', (event) => {
  // Verify the message is from InsightX
  if (event.origin !== 'https://app.insightx.network') return;
  
  const response = event.data;
});

💡

Each event type has its own request/response structure. See the individual event documentation for specific implementation details.