How to maximize a iframe portlet in Liferay portal?

1
votes

I have added a iframe portlet and have given the URL of an application to my Liferay portal.

When I click on the log in button / or app:

  • I want the iFrame portlet to automatically maximize and or navigate to another page.
  • I don't want to add a page in the Liferay portal and then give the URL, instead when I click the portlet, the application has to appear in a new page or maximized mode.

How do I achieve this?

1
iframeliferayportletmaximize
please show the code that you have tried uptill now – Abhishek Ghosh
There is no code. The iframe portlet is dragged and in the configuration the URL of the app is added and saved. That's it. But the portlet is confined to a given space, I want it to appear full page. – Shruthi
haven't you tried giving height and width to the iframe ? – Abhishek Ghosh
I have, yet it remains in a confined space. What i am looking for is, when i click on the portlet it should automatically maximize. – Shruthi
Well, where does the login button actually? You might require to add jQuery magic to increase the size of iframe or to navigate to other page. – Parkash Kumar

1 Answers

2
votes

You can do this if you have control (code control) over the app inside the iframe and they are from the same FQDN.

Create 2 pages in liferay like /home & /login, both would have iframe portlet configured with different URLs.

  1. /home: This would show your initial iframe-portlet and on click of the login button in your app you can give the URL for /login page which would have a one-app layout and iframe would fill in the whole page.
  2. /login: This page would have the URL configured in iframe of the page which appears in your app after you click login.

OR

You can have an onLoad script in your app within the iframe for the second page which appears after clicking on login, this script would maximize your iFrame when the second page is loaded inside iframe.

OR

You can use a hook to have a script in your iframe portlet to increase the height and width of the iFrame dynamically based on the content within.

But for the second & third method to work you would need that Liferay and the app inside iFrame share the same FQDN, or else your script won't work due to cross-domain scripting security.

For method's second and third here are some solutions:

What if you don't have control over the child-app and have a different FQDN?

If you do not have control over the child-app inside iFrame then my friend you are out-of-luck here since iFrame does not have access to the child-page (due to security reasons) nor does the child-page knows anything about the parent.

Here is another link that explains a lot and offers some solutions based on which allows Cross-domain messaging:

Hope this helps.