IntroductionEdit this page on GitHub
Easily communicate among browser tabs(supports cross-origin).
Features
- Safely enables cross-origin communication among different browser tabs. Uses
PostMessage
API for communication. - Easy to hook custom callback at various levels. Eg: executing a custom method in Child's tab on receiving a message from Parent tab.
- Option to provide
data-tab-opener="name"
attribute on the target link/btn(which opens up a new tab), so that it remains disable untilChild
tab initiates a handshake and is received by theParent
tab - Fully fledged API to get information regarding the tabs(Parent and Child tabs) and other communication related methods.
- Exports in a UMD format i.e. library works everywhere.
Browser Support
Tested in Chrome, Firefox and IE(versions >= 9).
Example
Create an instance / reference before using.
Opener(Parent) tab
var config = {
onHandshakeCallback: function () { ... },
onPollingCallback: function () { ... }
}
var parent = new AcrossTabs.Parent(config);
New(Child tab)
var config = {
onReady: onReady,
onInitialize: onInitialize,
handshakeExpiryLimit: 4000, // msec
onParentDisconnect: onParentDisconnect,
onParentCommunication: onParentCommunication
};
var child = new AcrossTabs.Child();
That's it! The communication setup would be set up once the new tab is opened up.