← All Demos

Cross-Iframe Menu Communication

About This Demo

This page demonstrates the cross-iframe architecture of fixSiteMenu. The parent page has a navigation bar and the content lives inside an <iframe>. Both pages load AE JS with fixSiteMenu():

  • Parent page — renders the trigger button and accessible menu overlay
  • Iframe page — only sets up a postMessage listener (no visible UI)

When a menu item is clicked in the parent, a message is sent to the iframe which then simulates the navigation within its own context.

Parent Page + Iframe Content

⚠ Cross-Frame Navigation
iframe — cross-iframe-content.html (same origin)

Portal Component Fixes Code

Parent page fix — creates the menu overlay in the parent window:

// Parent page: renders trigger button + menu overlay fixSiteMenu('#parent-nav') .menuLabel('Main Navigation')

Iframe page fix — sets up cross-frame message listener (no visible UI rendered):

// Iframe page: listens for ae-menu-click messages from parent // When inside an iframe, fixSiteMenu() automatically detects // window !== window.parent and enters cross-frame listener mode fixSiteMenu('.iframe-nav') .menuLabel('Iframe Navigation')

Architecture: Cross-Frame Message Flow

┌─────────────────────────────────┐
│  Parent Window                  │
│                                 │
│  ┌──────────────────────────┐   │
│  │ fixSiteMenu('#parent-nav')│  │
│  │ → trigger button + overlay│  │
│  └────────────┬─────────────┘   │
│               │                 │
│    user clicks menu item        │
│               │                 │
│    handleMenuItemClick()        │
│               │                 │
│    if menuItemId in             │
│    iframeReferences → send      │
│    postMessage to target iframe │
│               │                 │
│  ┌────────────▼─────────────┐   │
│  │        <iframe>          │   │
│  │  ┌────────────────────┐  │   │
│  │  │ fixSiteMenu(...)   │  │   │
│  │  │ (cross-frame mode) │  │   │
│  │  │                    │  │   │
│  │  │ window.addEventListener│  │
│  │  │ ('message', handler)│  │   │
│  │  │                    │  │   │
│  │  │ → simulateMenuItemClick│  │
│  │  │ → scrolls / navigates│ │  │
│  │  └────────────────────┘  │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

How to Test

  1. Click a nav link (e.g. "Services") in the dark navigation bar above. The iframe below should scroll to the matching section and briefly highlight it.
  2. Press Tab to reach the trigger button (if fixSiteMenu is active for this site hash). Press Enter to open the accessible menu overlay.
  3. Click a menu item in the overlay. The parent sends a postMessage with type cross-frame-scroll to the iframe, which scrolls to the corresponding section.
  4. Open DevTools on the iframe context and watch the status bar at the bottom — it updates each time a cross-frame navigation message is received.