https://github.com/friedemannsommer/typescript-postmessagehandler
Simply implements postMessage in Typescript
https://github.com/friedemannsommer/typescript-postmessagehandler
iframe postmessage typescript
Last synced: 2 months ago
JSON representation
Simply implements postMessage in Typescript
- Host: GitHub
- URL: https://github.com/friedemannsommer/typescript-postmessagehandler
- Owner: friedemannsommer
- License: mit
- Created: 2016-03-23T09:18:31.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2025-03-21T00:46:03.000Z (3 months ago)
- Last Synced: 2025-03-27T16:55:49.614Z (2 months ago)
- Topics: iframe, postmessage, typescript
- Language: TypeScript
- Homepage: http://friedemannsommer.github.io/typescript-postmessagehandler/
- Size: 1.53 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Typescript PostMessage
Simply implements postMessage in Typescript
## Documentation
You can find the API documentation
here: [friedemannsommer.github.io/typescript-postmessagehandler](https://friedemannsommer.github.io/typescript-postmessagehandler/)
## Compatibility
**NO** fallback for older Browsers!
Partial (IFrames)
* IE8-9
Full (IFrames, Windows, Tabs)
* IE10+
* Edge 12+
* Firefox 3+
* Chrome 4+
* Safari 4+
* Opera 10.1+
Source: [Can I use](https://caniuse.com/mdn-api_window_postmessage)
## Example
### Sender
```typescript
/**
* https://app.example.com
*/
import PostMessageHandler from 'typescript-postmessagehandler';
// in this example we use a IFrame to communicate with
const secret = 'my-secret-key';
let iFrame: HTMLIFrameElement = document.createElement('iframe');
iFrame.src = 'https://example.com/#' + secret;
document.appendChild(iFrame);
// instantiate PostMessageHandler
const messageHandler = new PostMessageHandler(secret, iFrame.contentWindow, 'https://example.com');
// send a message
messageHandler.send('example data', 1337, ['array', 'values'], {key: 'value'});
```
### Receiver
```typescript
/**
* https://example.com
*/
import PostMessageHandler from 'typescript-postmessagehandler';
// instantiate PostMessageHandler
const messageHandler = new PostMessageHandler(window.location.hash.slice(1), window.parent, document.referrer);
// create PostMessage Listener
function handlePostMessage(stringValue: string, numberValue: number, arrayValue: Array, objectValue: Object) {
// do what ever you want with your data :)
}
// subscribe to PostMessages
messageHandler.subscribe(handlePostMessage);
```