angular2-post-message

An implementation of the cross-origin communication via postMessage at Angular2 (RC6 compatible).

Description

The implementation is based on the PostMessageBusSource & PostMessageBusSink implementation of the @angular/platform-webworker package. At the current implementation of the wrapper, a bridge term is equivalent the Angular2 channel.

Installation

First you need to install the npm module:

npm install angular2-post-message --save

Use

main.ts

import{PostMessageModule}from'angular2-post-message';
@NgModule({bootstrap: [ApplicationComponent],imports: [PostMessageModule,
...
],
...
})exportclassApplicationModule{}

AppRootPostMessageModule.ts - Root application module

@NgModule()exportclassAppRootPostMessageModule{constructor(@Inject(PostMessageBridgeImpl)privatepostMessageBridge: IPostMessageBridge){/** * Root context */constiFrame: IPostMessageEventTarget=window.frames[0];constcurrentWindow: IPostMessageEventTarget=window;// The main usage scenariopostMessageBridge.setEnableLogging(false)// By default, the smart logger is enabled.connect(currentWindow,iFrame).makeBridge('Logout').makeBridge('ChangeLanguage').addListener('Logout',(message: any)=>console.log('The iframe has sent a message to the parent: LOGOUT')).sendMessage('ChangeLanguage','ru');// The additional usage scenario// You can also use the direct native mechanism of sending the message (if the external application does not use Angular2)window.frames[0].postMessage([{channel: 'ChangeLanguage',message: 'de'}],'*');}}

AppFramePostMessageModule.ts - IFrame application module.

@NgModule()exportclassAppFramePostMessageModule{constructor(@Inject(PostMessageBridgeImpl)privatepostMessageBridge: IPostMessageBridge){/** * IFrame context */constiFrame: IPostMessageEventTarget=window;constparentWindow: IPostMessageEventTarget=window.top;// The main usage scenariopostMessageBridge.setEnableLogging(false)// By default, the smart logger is enabled.connect(iFrame,parentWindow).makeBridge('Logout').makeBridge('ChangeLanguage').addListener('ChangeLanguage',(message: any)=>console.log(`The parent has sent a message to the iframe - set a new language as: ${message}`)).sendMessage('Logout');// The additional usage scenario// You can also use the direct native mechanism of sending the message (if the external application does not use Angular2)window.top.postMessage([{channel: 'Logout'}],'*');}}

Demo

Publish

npm deploy

License

Licensed under MIT.