~1 Kb wrapper of window.postMessage for cross-document communication.
A simple wrapper of
window.postMessage
for cross-document communication with each other.一个简单的
window.postMessage
封装,用于跨文档的双向数据通信。
postMessage
.event emitter
.namespace
supported.npm i --save post-messenger
or import it by script
in HTML, then get PostMessenger
on window.
<script src="https://unpkg.com/post-messenger/dist/post-messenger.min.js"></script>
parent
document.import PostMessenger from 'post-messenger';
// connect to iframe
const pm = PostMessenger('chat', window.iframe_name.contentWindow);
const listener = message => {
console.log(message);
}
// listen the messages
pm.once('room1.*', listener);
pm.on('room1.user1', listener);
iframe
document.import PostMessenger from 'post-messenger';
// connect to parent
const pm = PostMessenger('chat', window.parent);
const listener = message => {
console.log(message);
}
// send messages
pm.send('room1', 'All users of room1 will received.');
pm.send('*', 'broadcast message.');
Full example can be found here, and code here.
There is only one function named PostMessenger
, you can get the instance by:
// projectId: the unique id of communication.
// targetDocument: the document which you want to connect and communicate.
const pm = PostMessenger(projectId, targetContentWindow);
The instance has 4 apis.
Add a message listener on channel for once.
Add a message listener on channel.
Remove listener, if channel
and listener
are all undefined
, remove all.
Send a message to the channel.
The
window.postMessage()
method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.
The communicate target can be:
Reference here.
MIT@hustcc.