angular - تغییر دینامیک ارتفاع iframe در typescript/angular4

من روی یک برنامه بین دامنه کار می کنم که شامل بارگیری محتوا در iframe است. مشکل این است که ما اندازه محتوای دریافتی خود را نمی دانیم و من می خواهم بتوانم به صورت پویا ارتفاع iframe را تغییر دهم تا مناسب باشد. با این حال، تمام راه حل هایی که من پیدا کرده ام حول محور جاوا اسکریپت هستند، اما من با TypeScript/Angular4 کار می کنم.

من سعی کردهام به عناصر DOM از طریق (load) روی iframe دسترسی پیدا کنم اما این کار محتوای iframe را برنمیگرداند، بلکه اندازه اولیه iframe را قبل از بارگذاری محتوا باز میگرداند.

هر کمکی قدردانی میشود، متشکرم.

پاسخ شماره ۱

شما میتوانید از دستور زیر برای دستیابی به این هدف استفاده کنید.

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);
        }
    }
}
}

پاسخ شماره ۲

من یک برنامه مشابه دارم. من فقط ویژگی ارتفاع iframe را روی 100٪ تنظیم کردم و اسکرولینگ را روی خودکار گذاشتم. سپس در برنامه خارجی خود فقط کافی است html و body را روی 100٪ ارتفاع تنظیم کنید و overflow-y بدن را پنهان کنید.