web-tab-transponder
web-tab-transponder
is a browser tab(or iframe) communication tool, which is built with localStorage.
Features:
-
It runs well in Chrome, Firefox, Edge, IE8+ and other browsers;
-
This project uses Webpack to build UMD format codes, which can be imported as ES6 module, CommonJS module, script tag and other forms;
-
Mini size(base version is 1KB, IE8 version is 3KB).
-
Easy-to-use API.
Installation:
Using NPM (or YARN) tool to install, or import directly with <script>
tag.
- Via module
// npm / yarn
npm install web-tab-transponder
// or
yarn add web-tab-transponder
// es6 module
import Transponder from "web-tab-transponder"
// commonjs module
const Transponder = require("web-tab-transponder")
- Via tag
<!-- Offline: -->
<script type="text/javascript" src="*/**/build/transponder.js"></script>
<!-- Online: -->
<script type="text/javascript" src="https://unpkg.com/web-tab-transponder"></script>
<script type="text/javascript">
// use Transponder as global variable
const Transponder = window.Transponder
</script>
<!-- for IE8 -->
<!-- you must enable "DOM storage" in IE8, see: https://askinglot.com/how-do-i-enable-dom-storage-in-internet-explorer -->
<script type="text/javascript" src="https://unpkg.com/web-tab-transponder/build/transponder-IE.js"></script>
<script type="text/javascript">
// use Transponder as global variable
var Transponder = window.Transponder
</script>
Usage:
// in page "parent"
import Transponder from "web-tab-transponder"
const parentPage = new Transponder('parent').onMessage((e) => {
console.log('parent received data: ', e)
})
// send data to page "child", data is "I am parent"
parentPage.send('I am parent', ['child'])
// or send data to other page, each page of domain (except self) will receive data 'I am parent'
parentPage.send('I am parent')
// in page "child"
import Transponder from "web-tab-transponder"
const childPage = new Transponder('child').onMessage((e) => {
console.log('child received data: ', e)
})
// send data to page "parent", data is "I am child"
childPage.send('I am child', ['parent'])
// or send data to other page, each page of domain (except self) will receive data 'I am child'
childPage.send('I am child')
API:
params | required | e.g. |
---|---|---|
id: String | true | to build a instance of Transponder: const transponder = new Transponder('id'), if you want to build multiple instance, please use different id! |
Instance methods:
method | param | desc | e.g. |
---|---|---|---|
send | send(data: any, toId?: String[] | String): Transponder | send data to other page(or iframe), param toId is a string[] or string, which has used in other transponder, toId is optional, default will send data to each page (except self) of domain. | transponder.send(any, ['parent']); transponder.send(any, 'child'); transponder.send(any) |
onMessage | onMessage(callback?: Function): Transponder | callback of data receiving, param is ({ data, from }) | transponder.onMessage(({ data, from }) => { console.log('parent received data: ', { data, from }) } |
destory | destory(): void | destory the instance of Transponder | transponder.destroy() |
e.from
is: { href, pathname, hostname, port, protocol, hash, search, pagetype, id }, href, pathname, hostname, port, protocol, hash, search
is parent page's location deconstruction, pagetype
is 'page' or 'iframe'
, id
is parent page's id.
attention: the pattern of TIPS:
-
same-origin policy, it can not work if your page is from different sites;
All implementations of this tool are built in the browser -
This project is a pure front-end multi-page interaction scheme. If you have requirements on data volume and performance, please use HTTP, Websocket and other technologies;
-
Before passing data to the target page, make sure the target page has been loaded!