web-tab-transponder

English / 中文

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()

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.

TIPS:

• All implementations of this tool are built in the browser same-origin policy, it can not work if your page is from different sites;

• 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!