Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5 window.postmessage

I'm working on an application in Angular 6 with a Springboot API backend. I'm currently working on an application where I am loading an iframe. In the child Document when there is a submit button when I click the button an API is called in the child Document upon on response from that API I need to grab the response from that API. Does anyone have any suggestions?

Below is my component in typescript. I can include other codes if need be but I don't know that it is needed.

Here is the Code.............

import { Component, OnInit, ViewChild, HostListener, ElementRef } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-auth-exception',
  templateUrl: './auth-exception.component.html',
  styleUrls: ['./auth-exception.component.css']
})
export class AuthExceptionComponent implements OnInit {


  constructor() {

    if (window.addEventListener) {
      window.addEventListener('message', this.receiveMessage.bind(this), false);
    } else {
      (<any>window).attachEvent('onmessage', this.receiveMessage.bind(this));
    }
  }

  ngOnInit() {
    window.addEventListener('message', () => {
      this.receiveMessage();
   }, false);
  }

  setEventListener() {
    const eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
    const eventer = window[eventMethod];
    console.log('eventer=' + eventer);
    const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
    console.log(messageEvent + '---' + eventMethod);
    eventer(messageEvent, this.receiveMessage, false);
  }


  receiveMessage: any = (event: any) =>  {
    const origin = event.origin || event.originalEvent.origin;
    if (origin === '') {
      if (event.data !== null && typeof event.data === 'object') {
        console.log('Data' + event.data['']);
      } else {
        const RefObject = JSON.parse(event.data);
        console.log(RefObject);
        this.RefValue = RefObject.value;
      }
    }
  }

}
like image 461
vishnuk Avatar asked Nov 10 '18 04:11

vishnuk


People also ask

What is window postMessage?

postMessage() The window. postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

What is the difference between SendMessage and postMessage?

SendMessage: Sends a message and waits until the procedure which is responsible for the message finishes and returns. PostMessage: Sends a message to the message queue and returns immediately.

What is Targetorigin postMessage?

postMessage method allows different windows or iframes to communicate directly, even if they were loaded from different origins, circumventing the usual same-origin policy. The sender of the message can restrict the origin of the receiver by specifying a target origin.


1 Answers

you can use HostListener

@HostListener('window:message', ['$event']) onPostMessage(event) {
    // here your code
}
like image 152
Damsorian Avatar answered Sep 27 '22 19:09

Damsorian