Estoy tratando de incrustar un chatbot (aplicación Angular 14) en un iframe y esto funciona. La siguiente etapa es detectar si el marco interior debe minimizarse. Esto es necesario para diseñarlo para que se ajuste al contenedor principal. Deseo enviar eventos personalizados al marco receptor.
let iframeCanvas = document.querySelector("iframe").contentWindow.document.querySelector("canvas"); // canvas is where the image is placed for click eventsComponente de página incrustado angular:
<app-avatar #avatar (click)="toggle_chat()" [embedded]=true></app-avatar> He creado un evento @Output() : @Output() isOpen = new EventEmitter<boolean>();
Al hacer clic en el avatar, la función toggle_chat() emitirá el evento: this.isOpen.emit(false); // testing if the value can be accessed from a vanillaJS page
El problema es que no puedo acceder a los eventos emitidos desde Angular. ¿Cómo puedo recibir estos eventos en la página principal? Los eventos se encarcelan dentro de <iframe src="...angular app.." .. /> y, por lo tanto, para recibir mensajes y enviar mensajes a los emisores de eventos de iframe se necesitan.
Una imagen más clara del problema es esta estructura:
<!doctype html> <body> ... <script> // Receive events from the iframe below let iframeCanvas = document.querySelector("iframe").contentWindow.document.querySelector("canvas"); // Somehow access the iframeCanvas and listen for events if(iframeCanvas.isOpen) document.getElementById("chat-app-frame").classList.toggle('full-size-chat-window'); // Show the full size chat window </script> <iframe id="chat-app-frame" src="...angular/chatapp/index.html" frameborder="0" scrolling="no" style="position:fixed;right:0;bottom:0; height:50%;width:400px;"></iframe> </body> </html>