How to detect cancel event using iframe in angular?

@filiberto 

To detect a cancel event using an iframe in Angular, you can use the window.onmessage event listener in your component.

Here is an example implementation:

1. In your component template, add an iframe element and set the onload attribute to a method that will handle the window.onmessage event:

1

<iframe src="url_to_your_iframe" (load)="handleIframeLoad($event)"></iframe>

1. In your component class, create the handleIframeLoad method to handle the window.onmessage event. Inside this method, check for the cancel event message and perform the desired action:

1
2
3
4
5
6
7
8

handleIframeLoad(event: Event) {
  window.addEventListener("message", (e) => {
    if (e.data === "cancel") {
      // Handle the cancel event
      console.log("Cancel event detected");
    }
  });
}

1. In your iframe content, send a message to the parent window when the cancel event occurs:

1
2

// Inside iframe content
window.parent.postMessage("cancel", "*");

With this implementation, the iframe will send a message to the parent window when the cancel event occurs, and the parent window will detect this message using the window.onmessage event listener and handle the cancel event accordingly.