Examples

postMessage demo

Parent page and child iframe — connected via window.postMessage. IframeBridgeHost wires up the iframe ref so the bridge knows exactly where to send messages.

Unlike BroadcastChannel, postMessage is point-to-point — the parent holds a direct reference to the iframe's contentWindow. The child connects back via window.parent.

DevTools — parent bridge

DevTools

No bridge registered

How it works

Parent setup

<BridgeProvider<DemoMessage>
    open={true}
    channelName="frame-bridge-demo-pm"
    role="parent"
    enabledTransports={["post-message-channel"]}
    targetOrigin={window.location.origin}
>
    <ParentControls />
    <IframeBridgeHost
        src="/iframe/postmessage-child"
        targetOrigin={window.location.origin}
    />
</BridgeProvider>

Child setup (iframe page)

// app/(embed)/iframe/postmessage-child/page.tsx
<BridgeProvider<DemoMessage>
    open={true}
    channelName="frame-bridge-demo-pm"
    role="child"
    enabledTransports={["post-message-channel"]}
    targetOrigin={window.location.origin}
>
    <ChildInner targetOrigin={window.location.origin} />
</BridgeProvider>

// Inside ChildInner:
useEffect(() => {
    bridge.setTarget(window.parent, targetOrigin);
}, [bridge, targetOrigin]);

Message flow

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

window.postMessage → iframe.contentWindow

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

child iframe→window.parent.postMessage { type: 'pong', value: 2 }

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