Cross-Iframe Menu Demo

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

Press Tab to reach the trigger button in the parent page (before the nav bar).
Press Enter to open the accessible menu overlay. The menu items (About Us, Services, Contact) are extracted from the parent nav.
Click a menu item (e.g. "Services"). The parent sends a postMessage with type ae-menu-click to the iframe.
Open DevTools on the iframe context and check the console for cross-frame message handling logs.
Note: The cross-frame handshake that populates iframeReferences is still in development. Currently, menu items are handled by the normal click path (href navigation) unless explicitly registered. This demo illustrates the intended architecture.