https://github.com/ianwalter/line
Simple, safe parent-child communication with iframes using postMessage
https://github.com/ianwalter/line
iframe postmessage
Last synced: 11 months ago
JSON representation
Simple, safe parent-child communication with iframes using postMessage
- Host: GitHub
- URL: https://github.com/ianwalter/line
- Owner: ianwalter
- License: other
- Created: 2018-10-17T19:05:29.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-10-17T18:54:02.000Z (over 2 years ago)
- Last Synced: 2025-04-30T04:34:04.341Z (about 1 year ago)
- Topics: iframe, postmessage
- Language: JavaScript
- Homepage:
- Size: 579 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @ianwalter/line
> Simple, safe parent-child communication with iframes using postMessage
[![npm page][npmImage]][npmUrl]
## Installation
```console
npm install @ianwalter/line --save
```
## Usage
Parent:
```js
import Line from '@ianwalter/line'
// Create a line instance which establishes a communication line between the
// current window and an iframe within the current window, someIframe.
const line = new Line(someIframe)
// Subscribe to the alert topic and handle incoming messages with handleAlert.
line.sub('alert', handleAlert)
// Send a message to the action topic with some data.
line.msg('action', { date: new Date() })
```
Child:
```js
import Line from '@ianwalter/line'
if (Line.hasParent()) {
// Create a line instance which establishes a communication line between the
// current window and, by default, window.parent.
const line = new Line()
// Subscribe to the action topic and handle incoming messages with
// executeAction.
line.sub('action', executeAction)
// Send a message to the alert topic with some data.
line.msg('alert', { date: new Date() })
}
```
## License
Apache 2.0 with Commons Clause - See [LICENSE][licenseUrl]
Created by [Ian Walter](https://iankwalter.com)
[npmImage]: https://img.shields.io/npm/v/@ianwalter/line.svg
[npmUrl]: https://www.npmjs.com/package/@ianwalter/line
[licenseUrl]: https://github.com/ianwalter/line/blob/master/LICENSE