angular2-post-message
An implementation of the cross-origin communication via postMessage at Angular2 [4.0.1 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 ts-smart-logger --save
npm install angular2-post-message --save
Demo
1 git clone --progress -v "git@github.com :apoterenko/angular2-post-message.git" "D:\sources"
2 cd D:\sources\angular2-post-message\demo
3 npm install
4 npm start
Use
main.ts
import { PostMessageModule } from ' angular2-post-message/index ' ;
@ NgModule ( {
bootstrap : [ ApplicationComponent ] ,
imports : [
PostMessageModule ,
...
] ,
...
} )
export class ApplicationModule {
}
AppRootPostMessageModule.ts - Root application module
@ NgModule ( )
export class AppRootPostMessageModule {
constructor ( @ Inject ( PostMessageBridgeFactory ) private bridgeFactory : PostMessageBridgeFactory ) {
const iFrame : IPostMessageEventTarget = window . frames [ 0 ] ;
const currentWindow : IPostMessageEventTarget = window ;
bridgeFactory . makeInstance ( )
. setEnableLogging ( false )
. 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 ' ) ;
window . frames [ 0 ] . postMessage ( [ { channel : ' ChangeLanguage ' , message : ' de ' } ] , ' * ' ) ;
}
}
AppFramePostMessageModule.ts - IFrame application module.
@ NgModule ( )
export class AppFramePostMessageModule {
constructor ( @ Inject ( PostMessageBridgeFactory ) private bridgeFactory : PostMessageBridgeFactory ) {
const iFrame : IPostMessageEventTarget = window ;
const parentWindow : IPostMessageEventTarget = window . top ;
bridgeFactory . makeInstance ( )
. setEnableLogging ( false )
. 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 ' ) ;
window . top . postMessage ( [ { channel : ' Logout ' } ] , ' * ' ) ;
}
}
Demo
Publish
License
Licensed under MIT.