向父框架发出事件

发布于 2025-02-11 15:58:10 字数 1502 浏览 2 评论 0原文

我正在尝试将聊天机器人（Angular 14应用程序）嵌入iframe中，这有效。下一个阶段是检测内部框架是否应最小化。这是为拟合父容器的样式所需的样式。我希望将自定义事件发送到接收框架。

let iframeCanvas = document.querySelector("iframe").contentWindow.document.querySelector("canvas"); // canvas is where the image is placed for click events

Angular嵌入式页面组件：

<app-avatar #avatar (click)="toggle_chat()" [embedded]=true></app-avatar>

我已经创建了@output（） event：@output（）isopen = new EventEmitter＆lt; boolean＆gt;（）;

在单击avatar时代码> toggle_chat（）函数将发射事件：this.isopen.emit（false）; //测试是否可以从Vanillajs页面访问该值

问题是我无法访问从Angular发出的事件。如何在父页面上收到这些事件？这些事件在＆lt; iframe src =“ ... Angular App ..” .. /＆gt; < /code>的内部被判入狱，以便接收消息并将消息发送到iframe事件发射器。

该问题的一个更清晰的图片是这种结构：

<!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>

原文

I'm trying to embed a chatbot (Angular 14 app) in an iframe and this works. The next stage is to detect if the frame inside should be minimized. This is needed to style it for fitting the parent container. I wish to send custom events to the receiving frame.

let iframeCanvas = document.querySelector("iframe").contentWindow.document.querySelector("canvas"); // canvas is where the image is placed for click events

Angular embedded page component:

<app-avatar #avatar (click)="toggle_chat()" [embedded]=true></app-avatar>

I have created an @Output() event: @Output() isOpen = new EventEmitter<boolean>();

When clicking on the avatar the toggle_chat() function will emit the event: this.isOpen.emit(false); // testing if the value can be accessed from a vanillaJS page

The issue is I can't access events emitted from Angular. How can I receive these events on the parent page? The events are jailed inside of the <iframe src="...angular app.." .. /> and so to receive messages and send messages to the iframe event emitters are needed.

A more clear picture of the issue is this structure:

<!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>

分享到QQ

分享到微博