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;
}
}
}
}
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.
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.
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.
you can use HostListener
@HostListener('window:message', ['$event']) onPostMessage(event) {
// here your code
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With