Examples

BroadcastChannel demo

Parent page and child iframe — connected via BroadcastChannel. The child runs in a real iframe (separate browsing context), same as across tabs.

The child panel is a real <iframe> at /iframe/broadcast-child. Send a ping from the parent and watch the response arrive in both logs and the DevTools below.

Parent

closed

Press "Send ping" to start

DevTools — parent bridge

DevTools

No bridge registered

How it works

Parent setup

<BridgeProvider<DemoMessage>
    open={true}
    channelName="frame-bridge-demo"
    role="parent"
    enabledTransports={["broadcast-channel"]}
>
    <ParentControls />
</BridgeProvider>

Child setup (iframe page)

// app/(embed)/iframe/broadcast-child/page.tsx
<BridgeProvider<DemoMessage>
    open={true}
    channelName="frame-bridge-demo"
    role="child"
    enabledTransports={["broadcast-channel"]}
>
    <ChildInner />
</BridgeProvider>

Message flow

parent→bridge.send({ type: 'ping', value: 1 })

BroadcastChannel (cross browsing context)

child iframe←onMessage receives { type: 'ping', value: 1 }

child iframe→returns { type: 'pong', value: 2 }

parent←await resolves with { type: 'pong', value: 2 }