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?
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.
/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.
/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:
Resizing an iframe based on Content
Change iframe height dynamically based on Content
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 easyxdm which allows Cross-domain messaging:
Yet another cross-domain iframe resize Q&A
Hope this helps.
Related
I've implemented 3ds by adding an iframe to a div on my page.
Once the 3ds process is finished - the Bank uses a redirect url that I've provided.
my problem - is that it is redirecting the iframe and not my original page containing that iframe - giving me a result of my site - inside the iframe .
What is the technique to close the iframe once 3ds is over and make the redirect on the main browser page ?
I do not have control over the bank's implementation of the 3ds process.
First of all, by allowing you to provide a redirect url, the bank expects you to show the 3ds page at the top level, i.e. as a standalone page and not inside an iframe. Some banks even go as far as to prevent iframe usage entirely. And you probably never know for sure what issuing bank you're dealing with anyway. So if possible, you should avoid keeping the 3ds page within a frame.
Still, if you know the redirect url (since you provide it in the first place) you can simply monitor the onLoad event on that iframe and act upon it.
I am planing a simple website layout: Header with navigation, sidebar and a content block.
The whole site should be a single-page application because I am using a Cesium Visualization and a page reload would delete the current JS objects that are displayed in the Viewer.
Therefore I would like to reload the content container using AJAX to display my different "pages" and therefore keep all the JS Objects in the browser.
My question is:
Do you know a way to add a url-based navigation to this architecture?
For example: I am on the index page /index/ and enter the new url /content1/. The new url reloads the content container using AJAX and keeps the rest as it is. Therefore I would also be able to use the forward and backwards buttons of the browser.
May this be possible with ASP.net MVC routing?
I am pretty new to this so I hope I discribed my problem well enough.
Thanks a lot!
Try Pjax which uses ajax to load content dynamically via ajax
and pushState to maintain url history i.e is a HTML5 api. You shall find more details in the link below
https://github.com/defunkt/jquery-pjax
If you are familiar with angularjs then using ngRoute is a better alternative to Pjax as it has an effective url management through the routing service, please check the below link for more details on ngRoute
https://docs.angularjs.org/api/ngRoute/service/$route
I have an IFRAME in a page. And i have loaded another web page in that IFRAME.
But this newly added web page is not showing properly, i.e., web page is displaying without css.
If i open same web page in another window it displays normally with css.
I have searched a lot but haven't found any solution to resolve it.
Any Suggestions,
Thanks
Is the webpage from another domain?
Does the webpage of the iframe start with http while the parent page is https? Make sure the protocols are the same.
I want to allow some websites to embed an iframe with a page from my domain. However, I don't want anybody to be able to use the iframe content without my permissions. How can I allow only domains of my choice to be able to embed the iframe with the page's content?
I know vimeo does this, and allows video owners to block the video on certain websites that they don't find appropriate.
I want server side ASP.NET solution, because Javascript code can be altered. However if it can be done using javascript code and its secure, It's ok.
From what I've seen, I need to pass the referrer in some way, but in a way that can be manually altered by other website owners to include the iframe themselves and it would work on their website too, without a permission.
Since it will be a standalone page as you mentioned in the comments, you can do this by inspecting the referer property.
Request.UrlReferrer
See that it contains the domain that you want to allow. This property is available when an embedder puts your page in the IFRAME's SRC attribute and the page loads for the first time.
If the user clicks on a link inside the IFRAME, it is not guaranteed to pass the containing page as a referrer.
If you want to allow multiple linked pages inside the IFRAME to allow a specific domain, then you will need to stick to a JavaScript based solution.
Note however that neither method is completely foolproof.
I have an ASP mobile site and I am using jQuery mobile. I have problem using recaptcha on my contact page. it disappears when the captcha is wrong. It works fine when i am not using jQuery mobile. Any help pls? i am using jQuery validate plugin too.
Thanks
I was experiencing a similar issue - my team used jQuery mobile's ajax page linking to navigate to our sign-in page which used reCaptcha. The ajax call would cause the page to load, at which point the reCaptcha form would render and hide all other content. Refreshing the page would load everything properly.
My fix to this was to remove the ajax linking to the page. From the jQUery mobile manual:
Linking without Ajax Links that point to other domains or that have
rel="external", data-ajax="false" or target attributes will not be
loaded with Ajax. Instead, these links will cause a full page refresh
with no animated transition. Both attributes (rel="external" and
data-ajax="false") have the same effect, but a different semantic
meaning: rel="external" should be used when linking to another site or
domain, while data-ajax="false" is useful for simply opting a page
within your domain from being loaded via Ajax. Because of security
restrictions, the framework always opts links to external domains out
of the Ajax behavior.
In version 1.1, we've added support for using data-ajax="false" on a
parent container which allows you to excluded a large number of links
from the Ajax navigation system. This avoids the need to add this
attribute to every link in a container.
Note: When building a jQuery Mobile application where the Ajax
navigation system is disabled globally or frequently disabled on
individual links, we recommend disabling the $.mobile.pushStateEnabled
global configuration option to avoid inconsistent navigation behavior
in some browsers.
This fixed our loading issue, but now we experience another issue: when navigating from the sign-up page back to our landing page, and back to the sign-up page jQuery mobile causes the browser to reload the landing page. Still working on fixing this.
Edit:
After thoroughly reviewing my code I noticed that the page I was calling had html, head and body tags, pulled jquery.mobile-1.0.min.js and jquery-1.6.4.min.js twice, and was included in a template.
Once I removed the extra html, head and body tags (as well as the js includes), the page displayed properly.