Make communication between nested iframes as easy as computer networking.
Add it to an existing Vue or React Project:
# npm
npm install bridge-iframe
# pnpm
pnpm install bridge-iframe
# yarn
yarn add bridge-iframe
/——> (Children1)
(Parent) <———> (Node) <—————> (Children2)
\——> (More) ...
- Each page is associated with a superior page and multiple direct subordinate pages.
- Pages and upper-level pages can directly communicate with each other to transfer data.
- Cross-level pages can communicate and transfer data through forwarding.
- built-in address:
-
Main
Request the main window address -
Parent
Request the superior window (request the superior regardless of the level you are at)
-
- Main window methods:
-
@bridge/online
Notify the main window registration address -
@bridge/domain
Get name mapping address -
@bridge/mapping
Get all mapped addresses
-
- All window methods:
-
@bridge/ready
Is the node ready?
-
The following shows some commonly used methods
- Main page
main.html
<h1>Main</h1>
<iframe src="node1.html" id="node1"></iframe>
import { IFrameBridge } from 'bridge-iframe';
// Create bridge object
const bridge = new IFrameBridge;
birdge.ifrme('Node1', document.getElementById('node1') as HTMLIFrameElement);
// When the window is destroyed (needs to be called for a single page)
bridge.destroy();
- Node page
node1.html
<h1>Node1</h1>
import { IFrameBridge } from 'bridge-iframe';
// Create bridge object
const bridge = new IFrameBridge({ name: 'Node1' });
// When the window is destroyed (needs to be called for a single page)
bridge.destroy();
- Window initialization
// The current window is initialized
bridge.ready(async () => {
console.log('Main Ready');
});
// The specified window is initialized.
bridge.ready('Node1', async () => {
console.log('Node1 Ready');
});
- Subscribe message
// Subscribe events
bridge.on('say', async (vo: IFrameMessage) => {
// vo.getData(); # Get Request data
// vo.getResult(); # Get Response result
return 'My name is Main';
});
// UnSubscribe events
bridge.off('say');
- Request&Response
// Request a specific window
bridge.request({
name: 'Node1', // Window name (Default is Main)
method: 'say', // Method name
}).then((message: string) => {
console.log('say.then', message);
}).catch((error: Error) => {
console.log('say.catch', error);
});
// Request parent window (Immediate superior at any level)
bridge.request({
name: 'Parent',
method: 'say',
});
// Request main window
bridge.request({
name: 'Main',
method: 'say',
});
-
Example
iframe
nesting level-
Main
-
Main/Node1
Main/Node1/Node1-1
Main/Node1/Node1-2
-
Main/Node2
Main/Node2/Node2-1
Main/Node2/Node2-2
-
-
-
Call the upper window interface
Main/Node1/Node1-1
to requestMain
<Built-in protocol to obtain address>
-
Main/Node1/Node1-1
Request ↑↑↑ ToMain/Node1
- tracks[
{Node1-1:U}
]
- tracks[
-
Main/Node1
Forward ↑↑↑ ToMain
- tracks[
{Node1-1:U}, {Node1:U}
]
- tracks[
-
Main
Processing logic -
Main
Response ↓↓↓ ToMain/Node1
- tracks[
{Node1-1:U}
]
- tracks[
-
Main/Node1
Forward ↓↓↓ ToMain/Node1/Node1-1
- tracks[]
-
Main/Node1/Node1-1
Response received
-
Call
Main
on the downward window interface and request toMain/Node1/Node1-1
<Built-in protocol to obtain address>
-
Main
Request ↓↓↓ ToMain/Node1
- tracks[
{Main:D}
]
- tracks[
-
Main/Node1
Forward ↓↓↓ ToMain/Node1/Node1-1
- tracks[
{Main:D}, {Node1:D}
]
- tracks[
-
Main/Node1/Node1-1
Processing logic -
Main/Node1/Node1-1
Response ↑↑↑ ToMain/Node1
- tracks[
{Main:D}
]
- tracks[
-
Main/Node1
Forward ↑↑↑ ToMain
- tracks[]
-
Main
Response received
-
The peer window interface calls
Main/Node1/Node1-1
and requests toMain/Node1/Node1-2
<Built-in protocol to obtain address>
-
Main/Node1/Node1-1
Request ↑↑↑ ToMain/Node1
- tracks[
{Node1-1:U}
]
- tracks[
-
Main/Node1
Forward ↓↓↓ ToMain/Node1/Node1-2
- tracks[
{Node1-1:U}, {Node1:D}
]]
- tracks[
-
Main/Node1/Node1-2
Processing logic -
Main/Node1/Node1-2
Response ↑↑↑ ToMain/Node1
- tracks[
{Node1-1:U}
]
- tracks[
-
Main/Node1
Forward ↓↓↓ ToMain/Node1/Node1-1
- tracks[]
-
Main/Node1/Node1-1
Response received
-
Cross-level window interface calls
Main/Node1/Node1-1
to requestMain/Node2/Node2-1
<Built-in protocol to obtain address>
-
Main/Node1/Node1-1
Request ↑↑↑ ToMain/Node1
- tracks[
{Node1-1:U}
]
- tracks[
-
Main/Node1
Forward ↑↑↑ ToMain
- tracks[
{Node1-1:U}, {Node1:U}
]
- tracks[
-
Main
Forward ↓↓↓ ToMain/Node2
- tracks[
{Node1-1:U}, {Node1:U}, {Main:D}
]
- tracks[
-
Main/Node2
Forward ↓↓↓ ToMain/Node2/Node2-1
- tracks[
{Node1-1:U}, {Node1:U}, {Main:D}, {Node2:D}
]
- tracks[
-
Main/Node2/Node2-1
Processing logic -
Main/Node2/Node2-1
Response ↑↑↑ ToMain/Node2
- tracks[
{Node1-1:U}, {Node1:U}, {Main:D}
]
- tracks[
-
Main/Node2
Forward ↑↑↑ ToMain
- tracks[
{Node1-1:U}, {Node1:U}
]
- tracks[
-
Main
Forward ↓↓↓ ToMain/Node1
- tracks[
{Node1-1:U}
]
- tracks[
-
Main/Node1
Forward ↓↓↓ ToMain/Node1/Node1-1
- tracks[]
-
Main/Node1/Node1-1
Response received