web-tab-transponder
v1.1.0
Published
web-tab-transponder
Downloads
37
Maintainers
Readme
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:
Instance methods:
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!