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.
Use Open new window to spawn extra child instances and the target dropdown to address one specific child by its bridge.id — others will see the request in their observer but ignore it at the handler.

Parent

closed

my idx4o1m746hba

target

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 }