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

Question

我在 iframe 中运行 Angular 9 SPA，并使用 davidjbradshaw iframe-resizer 动态调整 iframe 的大小以适应 Angular 页面，以便用户永远不会在 iframe 中看到滚动条。

在超过视口高度的 Angular 页面上，ngb 模态弹出窗口通常显示在视口之外。然后用户必须滚动父页面才能找到弹出窗口。为简单起见，我想在 IFramed 页面顶部附近显示弹出窗口并将父页面滚动到顶部，以便它始终可见。

如果尝试直接从 IFramed 页面滚动父页面，则会违反跨域脚本。 davidjbradshaw iframe-resizer 提供了规避此类违规行为的能力，使用类似于它用于调整 iframe 大小的方法。在他的IFrame Page Methods documentation 中，Damon 提供了一种将父页面滚动到顶部的方法，如下所示：

if ('parentIFrame' in window) {
    parentIFrame.scrollTo(0, 0);
}

('parentIFrame' in window) 条件在运行时为正。所以全局变量 parentIFrame 必须存在。但是在 TypeScript 中 parentIFrame 引用是未定义的，我不知道如何从 Angular 9 内部获取它的句柄，以便它可以转译。

Answer 1

if ('parentIFrame' in window) {
    const parentIFrame = window["parentIFrame"];
    parentIFrame.scrollTo(0, 0);
 }