My current project involves embedding an Angular2 application within a Liferay portlet using iframes. The Liferay tomcat server is hosted on a different domain than the Angular2 application, and I am facing challenges with dynamically resizing the iframe based on the content height of the Angular2 application. To tackle this issue, I am utilizing a helper file on the Liferay's tomcat server as suggested in the solution provided here.
This is a snippet of what I've implemented so far:
<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(parseInt(height));
}
// Helper function to 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>
Within the JSP file in the Liferay portlet containing the 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>
In my Angular2 application's component HTML file:
<menu></menu>
<router-outlet></router-outlet>
<iframe id="helpframe" [src]='helperSource' height='0' width='0' frameborder='0'></iframe>
And the corresponding TypeScript code in the Angular2 application's component file:
import {Component} from "@angular/core";
import {OnInit} from "@angular/core";
import {ContextService} from "./common/service/context.service";
import {DomSanitizer} from "@angular/platform-browser";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
helperSource;
constructor(private sanitizer: DomSanitizer, private context: ContextService) {
}
ngOnInit(): void {
let height = window.innerHeight;
if (height < 800) height = 800;
this.helperSource = this.sanitizer.bypassSecurityTrustResourceUrl(this.context.baseUrl + '/helper/helper.html' + '?height=' + height);
}
}
Despite setting the initial iframe height during initialization, I'm now faced with the challenge of detecting resize events of the content within the angular app loaded in the iframe. Attempting to use '@HostListener('window:resize', ['$event'])' only captured window resize events rather than iframe resize events. Another approach involving accessing the contentWindow of the iframe also failed due to security restrictions related to cross-domain issues.
I'm seeking advice on whether there is a feasible way to listen for resize events within the iframed application or explore alternative solutions to address this issue.