web-tab-transponder
is a browser tab(or iframe) communication tool, which is built with localStorage.
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>
// 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')
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! |
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() |
attention: the pattern of 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.
-
All implementations of this tool are built in the browser same-origin policy, it can not work if your page is from different sites;