angular2-post-message
TypeScript icon, indicating that this package has built-in type declarations

1.3.1 • Public • Published

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) {
        /**
         * Root context
         */
        const iFrame: IPostMessageEventTarget = window.frames[0];
        const currentWindow: IPostMessageEventTarget = window;
 
        // The main usage scenario
        bridgeFactory.makeInstance()
            .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()
export class AppFramePostMessageModule {
 
    constructor(@Inject(PostMessageBridgeFactory) private bridgeFactory: PostMessageBridgeFactory) {
        /**
         * IFrame context
         */
        const iFrame: IPostMessageEventTarget = window;
        const parentWindow: IPostMessageEventTarget = window.top;
 
        // The main usage scenario
        bridgeFactory.makeInstance()
            .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

Preview

Publish

npm run deploy

License

Licensed under MIT.

Package Sidebar

Install

npm i angular2-post-message

Weekly Downloads

11

Version

1.3.1

License

MIT

Last publish

Collaborators

  • apoterenko