davidjbradshaw iframe-resizer:如何从Angular 9调用IFrame页面方法

davidjbradshaw/iframe-resizer是一个JavaScript库，它允许在父页面中控制嵌入的IFrame页面。通过使用该库，你可以从Angular 9调用IFrame页面中的方法。

具体步骤如下：

首先，在Angular项目中安装iframe-resizer库。你可以使用npm命令来安装它：

npm install davidjbradshaw/iframe-resizer

在父页面的组件中导入iframeResizer库：

import * as iframeResizer from 'iframe-resizer';

在父页面的组件类中，使用iframeResizer库的iframeResizer()方法来初始化IFrame的resizer。你需要传递一个配置对象，指定需要调整的IFrame元素的选择器。

export class ParentComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const iframe = document.getElementById('your-iframe-id') as HTMLIFrameElement;
    iframeResizer.iframeResizer({}, iframe);
  }
}

确保将your-iframe-id替换为实际的IFrame元素的ID。

在IFrame页面中，你需要在导入iframeResizer.contentWindow后，调用iframeResizer.contentWindow.js方法来启用与父页面的通信。

import * as iframeResizer from 'iframe-resizer/contentWindow';

iframeResizer();

现在，你可以在父页面中的组件类中使用iframeResizer库的sendMessage()方法来调用IFrame页面中的方法。需要提供IFrame元素的选择器、要调用的方法名和可选的参数。

export class ParentComponent {
  callIFrameMethod() {
    const iframe = document.getElementById('your-iframe-id') as HTMLIFrameElement;
    iframeResizer.sendMessage(iframe, 'methodName', 'parameter');
  }
}

同样，确保将your-iframe-id替换为实际的IFrame元素的ID，并且替换methodName和parameter为实际的方法名和参数。

以上是使用davidjbradshaw/iframe-resizer库从Angular 9调用IFrame页面方法的步骤。该库可以让你方便地在父页面中与嵌入的IFrame页面进行通信和交互。如果你想了解更多关于这个库的信息，可以访问davidjbradshaw/iframe-resizer的GitHub页面。