Angular2 Anwendung in Iframe Größesereignis eingebettet

Ich habe eine Angular2 Anwendung iframed in Liferay Portlet. Liferay Tomcat ist in einer anderen Domäne als angular2 Anwendung. Ich versuche, iframe basierend auf der Höhe der iframed-Anwendung zu skalieren. Ich benutze dafür die Helferdatei auf dem Tomcat von Liferay - basierend auf der Antwort Resizing an iframe based on content.Angular2 Anwendung in Iframe Größesereignis eingebettet

Dies ist, was ich bisher habe: helper.html auf tomcat mit Anwendung parent:

<html> 
<!-- 
This page is on the same domain as the parent, so can 
communicate with it to order the iframe window resizing 
to fit the content 
--> 
<body onload="parentIframeResize()"> 
<script> 
    // Tell the parent iframe what height the iframe needs to be 
    function parentIframeResize() 
    { 
     var height = getParam('height'); 
     // This works as our parent's parent is on our domain.. 
     parent.parent.resizeIframe(height); 
    } 

    // Helper function, parse param from request string 
    function getParam(name) 
    { 
     name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
     var regexS = "[\\?&]"+name+"=([^&#]*)"; 
     var regex = new RegExp(regexS); 
     var results = regex.exec(window.location.href); 
     if(results == null) 
      return ""; 
     else 
      return results[1]; 
    } 
</script> 
</body> 
</html>

JSP-Datei im Portlet mit iframe:

<iframe id="iframed-application" 
     src="${baseUrl}:${externalTomcatPort}/${applicationName}/iframe?baseUrl=${baseUrl}:${port}"> 
</iframe> 

<script> 
    // Resize iframe to full height 
    function resizeIframe(height) { 
     document.getElementById('iframed-application').height = parseInt(height) + 10; 
    } 
</script>

Angular2 app.component. html

<menu></menu> 
<router-outlet></router-outlet> 
<iframe id="helpframe" [src]='helperSource' height='0' width='0' frameborder='0'></iframe>

Angular2 app.component.ts

Wenn ngOnInit aufgerufen wird, wird die Vorlage noch nicht gerendert, also setzt sie iframe height immer auf 800px, aber die Hauptfrage ist anders. Wie kann ich das Größenänderungsereignis des Inhalts der eckigen App im iframe erkennen? Ich habe versucht zu verwenden:

@HostListener('window:resize', ['$event'])

aber es ist zu hören, die Größe des gesamten Fensters zu ändern, nicht der Iframe.

Mein zweiter Versuch war wie folgt:

let iframe: HTMLIFrameElement = <HTMLIFrameElement> document.getElementById('iframed-application'); 
    let contentWindow: Window = iframe.contentWindow; 
    contentWindow.onresize = event => { 

};

Aber es auch nicht, weil document.getElementById null zurückgegeben - Cross-Domain - wie ich aus Gründen der Sicherheit verstehen.

Ist es irgendwie möglich, die Größe von iframed Anwendung zu hören, oder vielleicht gibt es einen anderen Weg?

Quelle

2017-03-13 mdziob

Nur Lösung, die wir verbindlich das auf Körper Onclick-Ereignis gefunden, zB unter:

let body = document.getElementsByTagName('body')[0]; 

setTimeout(() => { 
    this.setHeight(body.offsetHeight); 
}, 500); 

body.addEventListener('click',() => { 
    this.setHeight(body.offsetHeight); 
});

Quelle

2017-03-21 11:52:08 mdziob

Hier ist eine Richtlinie, die es tut

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

Verbrauch:

<iframe [src]="iframeUrl" iframeAutoHeight></iframe>

Quelle

2017-08-29 14:37:12

Angular2 Anwendung in Iframe Größesereignis eingebettet

Antwort

Verwandte Themen