我正在研究一个解决方案,其中在另一个 Angular 应用程序的 iframe 内使用了一个 Angular 应用程序。 子应用程序需要一些参数才能向应用程序父级显示正确的信息。 我在网上阅读了很多解决方案,一个很好的解决方案是应用设计模式发布者/订阅者。

许多例子都分量之间的同一个应用程序内,我想知道如果与rxjs对象相同的解决方案是正确的方式(如所示在这里)。

我的疑问是:我如何将子应用程序订阅到父级(外部发布者)?

我正在考虑由父级公开的 REST API 用于订阅者的注册和注销,但我不确定。

有这种情况的经验吗? 提前致谢

#1楼 票数:0

我见过这样做的唯一方法是通过CustomEvent对象。

想要发送通知的页面使用这个:

<script>
    window.onload = function () {
        /* The parent window hosts the Angular application */
        const parent = window.parent;
        /* Send an event to the message handler */
        const event = new CustomEvent('example-unique-string', { field1: 'value', field2: 'value' });
        parent.dispatchEvent(event);
    };
</script>

然后您使用以下方法处理此消息:

window.addEventListener('example-unique-string', () => { /* some function */ }, false);

当然,您可以双向进行。

如果可以的话,我当然会完全避免使用iframe ,但您会知道什么适合您的情况。

#2楼 票数:0

您可以使用 window.postmessage 方法在 iframe 和父应用程序之间发布消息。 您还可以随事件一起发布数据。 https://javascript.info/cross-window-communication

您可以参考上面的链接将消息发布到 iframe 和从 iframe 发布。

  ask by peterboccia translate from so

未解决问题?本站智能推荐:

1回复

主机和iframe应用程序之间的通信

我有一个用angular 7构建的UI应用程序。此应用程序在其iframe中显示了另一个应用程序(在iframe中显示的子应用程序也是在angular 7中构建的)。 我需要将一些数据传递给iframe。 我浏览了几篇有关事件和HTML5 postMessage的文章。 但找不到用于
2回复

无法使用iframe将消息从angularjs应用程序发布到Angular10应用程序

我有两个应用程序,一个是 angular js 应用程序,另一个是在我本地运行的 angular 10 应用程序。我需要使用 iframe 从 Angular 10 访问页面,并且需要使用来自 angular js 的 iframe 向 Angular 10 应用程序发布一些消息应用。 但是我无法使
1回复

如何在Angular4应用程序中将传统表单发布到iframe中

我试图从Angular 4应用程序中将传统的表单发布到iframe中,而只是将其发布到新标签中。 在将ngNoForm添加到form元素之前,我ngNoForm无法发布该表单,所以我假设我需要做其他事情(也许是对iframe元素?),我的form标记如下所示: 我的iframe广告代码如下
1回复

如何在角度应用程序中订阅iframe位置更改?

我有一个带有iframe元素的组件。 我将src属性设置为原始URL,用户可以从那里导航。 我想订阅用户导航到的新位置,前提是它们位于同一域中。 在非角度解决方案中,他们描述了在iframe上放置onload事件,但是在初始化时以角度将iload加载事件似乎仅被触发一次,而不是每次在ifr
1回复

两个Angular8+应用程序之间通过iframe的事件侦听器

我们正在浏览器窗口中通过 iframe 运行 2 个 angular 应用程序。 我想在我的 angular 应用程序中创建某种事件侦听器,它将侦听来自其他 iframe 的特定事件。 我怎样才能做到这一点? 我的意思是函数已经准备好使用,但它们需要以某种方式被触发(从另一个 angular 应用程
1回复

如何将值从iframe传递给Angular应用程序

我有带有路线的 Angular 9 应用程序。 它嵌入到 iframe 中的 ASP.NET 应用程序中(我无法控制此设置,Angular 的/dist文件夹位于 ASP.NET 应用程序的文件夹结构内)。 一切正常,但新的要求是默认加载显式路由。 这是当前的设置: 寻找类似下面的东西(它会因Err
1回复

iframe未在angular4应用程序中加载src

在我的应用程序中,我正在将youtube视频加载到iframe中。 我已经清理了网址。 但是当我运行应用程序时,src属性不会加载。 以下是html: 下面是我运行相同的屏幕截图: src只是不会加载我尝试过的[src] = data.url。 以下是我用来清理网址的方法:
1回复

Angular7应用程序中的iframe跨域问题

我们在第三方(供应商)的网站中有我们的自定义选项卡。 我们的自定义选项卡包含项目列表。 当单击特定项目时,我们需要打开一个包含该项目详细信息的父网站页面。 父应用程序和我们的应用程序都是 Angular 应用程序。 我们使用 iframe 来显示父应用程序页面。 但是,由于我们的应用程序域与父应用程