在 typescript/angular4 中动态更改 iframe 的高度

Question

我正在开发一个涉及将内容加载到 iframe 中的跨域应用程序。问题是我们不知道我们收到的内容的大小，我希望能够动态更改 iframe 的高度以适应相应的大小。但是，我发现的所有解决方案都以 JavaScript 为中心，但我正在使用 TypeScript/Angular4。

我尝试通过 iframe 上的 (load) 访问 DOM 元素，但它不返回 iframe 内容，而是返回初始 iframe 大小（在加载内容之前）。

感谢您的帮助，谢谢。

Answer 1

您可以使用以下指令来实现此目的。

import { Directive , ElementRef , OnInit , Renderer } from '@angular/core';
@Directive({
selector: '[iframeAutoHeight]'
})
export class IframeAutoHeightDirective implements OnInit {
private el: any;
private renderer: Renderer;
private prevHeight: number;
private sameCount: number;

constructor(_elementRef: ElementRef, _renderer: Renderer) {
    this.el = _elementRef.nativeElement;
    this.renderer = _renderer;
}

ngOnInit() {
    const self = this;
    if (this.el.tagName === 'IFRAME') {
        this.renderer.listen(this.el, 'load', () => {
            self.prevHeight = 0;
            self.sameCount = 0;
            setTimeout(() => {
                self.setHeight();
            }, 50);
        });
    }
}

setHeight() {
    const self = this;
    if (this.el.contentWindow.document.body.scrollHeight !== this.prevHeight) {
        this.sameCount = 0;
        this.prevHeight = this.el.contentWindow.document.body.scrollHeight;
        this.renderer.setElementStyle(
            self.el,
            'height',
            this.el.contentWindow.document.body.scrollHeight  + 'px'
        );
        setTimeout(() => {
            self.setHeight();
        }, 50);

    } else {
        this.sameCount++;
        if (this.sameCount < 2) {
            setTimeout(() => {
                self.setHeight();
            }, 50);
        }
    }
}
}

Answer 2

我有一个类似的应用程序。我只是将 iframe 高度属性设置为 100% 并滚动到自动。然后在您的外部应用程序中，只需将 html 和 body 设置为 100% 高度，并将 body overflow-y 设置为隐藏。